Question

我希望将固定宽度（包装器）的包装器div放在另一个div（主体）中，如下所示。 enter image description here

该行代表页面/浏览器窗口的中心，正如您所看到的，包装器的正文和中心都位于页面中间的中心位置。

有没有办法使用纯CSS和HTML来实现这一目标？

提前致谢。

Answer 1

有人打算在这个常见问题上写一篇简短易懂的操作方法：http://www.wpdfd.com/editorial/thebox/deadcentre4.html

你有两个要定位的项目，所以你需要两次应用这个技术，但你不能真正将body元素置于中心，所以你需要添加另一个容器而不是身体。

玩得开心！

Answer 2

你总是可以尝试。

margin: auto;

这只适用于doctype。所以把它放在你的html标签上面。

<!DOCTYPE html>

Answer 3

我建议只使用上面给出的标准包装函数。

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#bodywrapper { width: 600px; margin: 0 auto; }
#wrapper { width: 400px; margin: 0 auto;  }
</style>

</head>
<body>

<div id="bodywrapper">
        .....whatever code you in the body here.
    <div id="wrapper>
          ....whatever you want inside the wrapper that is inside the body here.
    </div>
</div>

</body>
</html>

基本上，您只是在包装器中嵌套包装器。没有理由不能这样做。

包含溢出隐藏的包装中心div

3 个答案: