恐怕唯一不显式指定宽度的方法是使用(gasp)表。

<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

｝

使用span代替内部div

<div class="container_box">
   <span class="content">Hello</span>
</div>

默认情况下，div元素显示为块元素，因此它们有100%的宽度，使得居中没有意义。正如Arief所建议的，你必须指定宽度，然后你可以在指定边距时使用auto，以便将div居中。

或者，您也可以强制display: inline，但这样您就会有一些行为非常像span而不是div的东西，所以这没有多大意义。

带有' display: block '(默认为div)的元素的宽度由其容器的宽度决定。你不能让一个块的宽度依赖于它的内容的宽度(缩小到适合)。

(除了CSS 2.1中' float: left/right '的块，但这对居中没有用处。)

你可以将“display”属性设置为“inline-block”，将一个块转换为一个可以由其父元素的text-align属性控制的收缩对象，但浏览器的支持参差不齐。你可以通过使用黑客(例如。如果你想这样做，请参阅-moz-inline-stack)。

另一种方法是桌子。当您的列的宽度确实无法提前知道时，这可能是必要的。我无法从示例代码中真正看出您想要做什么-其中没有任何明显的需要缩小以适应的块-但是可以将产品列表视为列表。

[附注:永远不要在网络上使用' pt '来表示字体大小。如果确实需要固定大小的文本，' px '更可靠，否则像' % '这样的相对单位更好。还有“clear: ccc both”——拼写错误?］

.center{
   text-align:center; 
}

.center > div{ /* N.B. child combinators don't work in IE6 or less */
   display:inline-block;
}

JSFiddle

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

如果你不提供"overflow:hidden"为"。Product_container”，“outer-center”div将与它右边的其他附近内容重叠。任何链接或按钮的右边“外中心”不会工作。尝试“outer-center”的背景色来理解“overflow:hidden”的需求

将这个CSS添加到product_container类中

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;