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

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

<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

如果目标元素是绝对定位的，您可以通过将其在一个方向上移动50%(左:50%)，然后将其在相反的方向上转换50% (transform:translateX(-50%))来居中。这无需定义目标元素的宽度(或使用width:auto)。父元素的位置可以是静态的、绝对的、相对的或固定的。

我发现了一个有趣的解决方案，我正在制作滑块，必须将滑块控制居中，我这样做，工作很好。您也可以添加相对位置到父和移动子位置垂直。看看http://jsfiddle.net/bergb/6DvJz/

CSS:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>

我找到了一个更优雅的解决方案，结合“内联块”来避免使用float和俗气的clear:两者。它仍然需要嵌套的divs，这不是很语义，但它只是工作…

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

希望能有所帮助!

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

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