如何将 <div> 对齐到页面中心[重复]答案

【问题标题】：How to align a <div> to center of the page [duplicate]如何将 <div> 对齐到页面中心[重复]
【发布时间】：2012-03-30 15:29:22
【问题描述】：

可能重复：
How to align a <div> to the middle of the page

我有一个高度设置为 800px 的 div 标签，我希望当浏览器宽度大于 600px 时，它不应该拉伸 div，但应该将它带到页面中间

我怎样才能做到这一点？

我可以使用以下代码吗？以内容为中心

【问题讨论】：

你可以尝试margin: auto，但请注意这在所有浏览器中都不能正常工作，尤其是。浏览器
离题，但我忍不住分享这个：youtu.be/91TCgj_pQ98?t=3m

标签： html css

【解决方案1】：

简答：

边距设置为自动

<html>
<head><title>Your Title</title></head>
<body>
<div style="width:600px; margin:auto; border:1px solid red">
</div>
</body>
</html>

长答案：

您可能希望为该 div 设置一个 id，并为相应的 css 选择器提供规则，而不是使用类似的内联样式。

另外，要在 ie 6 和 7 中正常工作，您需要给出 doctype 声明，否则它将无法工作，因为 ie 将在 quirks 模式下工作 http://www.satzansatz.de/cssd/quirksmode.html

所以完整的答案应该是这样的

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <title>Your Title</title>
       <style>#container { width:600px; margin:auto; border:1px solid red }</style>
    </head>
    <body>
       <div id="container">
       </div>
    </body>
    </html>

【讨论】：

我可以使用下面的代码吗？
内容居中
是的，你可以，0 auto 只是表示上下边距为 0，左右边距为 auto。

【解决方案2】：

在 css 中加入以下属性：

max-width:600px;
position:relative;
margin:auto;

我不清楚的一点是，如果浏览器宽度小于 600 像素，您是否希望 div 占用浏览器的宽度？

【讨论】：

位置默认是相对的
其实位置默认是父位置。我们不知道 div 的确切位置
我可以使用下面的代码吗？
内容居中
我不同意，默认位置是static，所以你需要在top:和left:生效之前明确定义position:relative
@chetan 是的，你可以，因为身体的高度将占据 div 的全部高度，所以两个边距声明不会有太大差异.....但是你想要宽度800 像素还是 600 像素？