Question

这里有一个“简单”的问题，不知道为什么会这么复杂。

拥有100％（宽度）大小的div。
让另一个div位于此div的中间（大小为940px宽）

有什么想法吗？ :)

Answer 1

.parent { text-align: center; }
.parent > .child { margin: 0 auto; width: 900px; }

Answer 2

内部div的以下样式将使其居中。

margin: 0 auto;

Answer 3

有关详细信息，请说下面的代码将使div对齐中心：

margin-left: auto;
margin-right: auto;

或只是使用：

margin: 0 auto;

但请记住，只有在html元素上指定固定宽度（不是100％）时，上述CSS代码才有效。所以问题的完整解决方案是：

.your-inner-div {
      margin: 0 auto;
      width: 900px;
}

Answer 4

关键是内部div上的 margin：0 auto; 。概念验证示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <div style="background-color: blue; width: 100%;">
        <div style="background-color: yellow; width: 940px; margin: 0 auto;">
            Test
        </div>
    </div>
</body>
</html>

Answer 5

.outerdiv {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

在Internet Explorer 7中不起作用......但谁在乎？

Answer 6

只需将margin: 0 auto;添加到内部div。

中心Div在另一个（100％宽度）div内

6 个答案: