html - 如何在绝对定位的 div 中居中 div？

Question

我正在使用流畅的布局设计，我希望带有 class 的 div 在center带有 class 的 div 内水平居中outer。我试过这个，但它不起作用。我究竟做错了什么？

HTML：

<div class="outer">
    <div class="inner"> // this div has height=0. Why?
        <div class="center">
            // stuff
        </div>
    </div>
</div>

CSS：

.outer {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    height: auto;
}

.inner {
    width:100%;
}

.center {
    margin:0 auto;
}

Answer 1

您必须将内部视为div页面中的常规内容，例如：

#inner {
    position:fixed;
    top: 50%;
    left: 50%;
    width:234px;
    height:90px;
    margin-top:-45px; /*set to a negative number 1/2 of your height*/
    margin-left:-117px; /*set to a negative number 1/2 of your width*/
    border: 0.5px solid #ccc;
}

这样就可以了，您可以相应地进行调整。

Answer 2

对左边距使用百分比，例如：

.center
{
width:90%;
margin-left:5%;
}

我使用 5% 的原因是因为中心的宽度是它的容器的 90%，我们还有 10% 的空间，所以要居中你必须把它带到左边可用空间的一半；在这种情况下是 5%

Answer 3

Inline-block 可能是居中 div 的最佳选择，然后使用我们的外部 div 和 text-align:center 来使内部容器居中。你并不真正需要一个内部和中心 div，但为了举例，我保留了它。下面是一个小提琴链接：

http://jsfiddle.net/UYw8S/2/

例如，添加了边框和填充。

<div class="outer">
    <div class="inner">
        <div class="center">
           Inner stuff
       </div>
   </div>
</div>

.outer {
position: absolute;
left: 0;
right: 0;
top: 50px;
height: auto;
background:#ccc;
border:1px solid #333;
}

.inner {
display:block;
margin:10px;
border:1px solid #333;
text-align:center;
}

.center {
margin:10px 0;
text-align:left;
height:40px;
width:80%;
display:inline-block;
background:#fff;
padding:10px;
}