Question

我试图将我的内容div设为中心，但使用当前的方法，它是向右而不是死中心。

#content {
    width: 620px;
    height: 2000px;
    position:absolute;
    top: 300px;
    left:50%;
    margin-right: 310px;
    background-color: #0F0;
    padding: 0;
    margin: 0px;
}

Answer 1

你应该使用margin: 0 auto;宽度;然后它将从其父项中心。

Answer 2

只要div有宽度：

 #content {
   width: 620px;
   margin: 0 auto;
}

Answer 3

以绝对定位为中心对象，

top:50%;
left:50%;
margin-top:-1000px; /* half of size */
margin-left:-310px; /* half of size */

这很简单！

**绝对是最后的手段，通常在相对位置元素内使用。小心，如果你有一个绝对的'divitis'的情况（使用divs做所有事情并用绝对定位它们因为你不熟悉最佳实践）

最好使用margin:auto水平居中。

Answer 4

#content{
    width: 620px;
    Left: 50%;
    margin-left: -310px;
}

您希望使用#content div总宽度的-50％来移动50% - 有点棘手：）

Answer 5

首先，您不应该将position: absolute;用于此目的。

您只需要定义宽度，然后使用margin: 0 auto;将div居中。

例如......

#content {
width: 960px;
margin: 0 auto;
}

这是一个JSFiddle ...... http://jsfiddle.net/cD6pe/

如何让我的div正确居中

5 个答案: