如何将 <div> 容器与网页的中间对齐？答案

【问题标题】：How would I align a <div> container to the middle of a webpage?如何将 <div> 容器与网页的中间对齐？
【发布时间】：2011-07-14 08:33:22
【问题描述】：

我正在设计一个网站，这是我上传之前需要的最后一部分。我搜索了这个网站和许多其他网站，但老实说，我无法找到正确的解决方案。我会尽可能具体。

www.solarfields.com 这是一个很好的例子。我想在网页中间对齐我的内容，就像他的一样。然而，他使用 Flash，我想保留 HTML 和 CSS。我已将我网站的整个正文包含在具有以下属性的标记中：

#body {
    position:absolute;
    top:13%;
    left:25%;
    width:350px;
}

它以我的显示器 (1600x900) 为中心，但我希望它以所有分辨率显示为中心。

尺寸：525px (h) x 350px (w)。

我不止一个<div>。

我不关心浏览器的兼容性。

我不想要可见的边框。

有一张 801 像素宽的桌子。它有两个<td>，29px 和 762px 宽。

我是 CSS 新手，所以我只是提供随机信息。如果您需要其他任何东西，请随时给我发电子邮件@mattjack66@gmail.com。

非常感谢。

【问题讨论】：

你试过了吗：body { margin: 0 auto; }？试试看这里：stackoverflow.com/questions/963636/…
正文{边距：0自动； } 只是把它粘在一个角落里。我正在尝试链接。
哦！第二个链接用于对齐外部
（谢谢！！！），但不是嵌套的。我正在努力……

标签： css html alignment centering

【解决方案1】：

如果您在也设置了宽度的 div 上设置 margin: 0 auto;，它将在其父容器中居中。

更具体地说，采用以下 css：

div#body {
    width:902px;  //Or whatever your content width is
    margin:0 auto;
    padding:0;
}

并将该类应用于您网站中最外层的 div：

<html>
    <body>
        <div id"body">
            ...The rest of your content...
        </div>
    </body>
</html>

它的作用是将#body的上下边距设置为0，左右边距自动分配它们之间的空白空间；哪个 div 在页面上居中。这适用于左/右中心。

【讨论】：

【解决方案2】：

解决方案：http://jsfiddle.net/magicaj/Xd7sK/5/

水平居中很容易，您只需在要居中的元素上设置margin:0 auto;。然而，让一个元素垂直居中要困难得多。有CSS only solutions 可以模仿表已经可以使用vertical-align:middle; CSS 执行的操作。我一直努力仅将表格用于表格数据，但在这种情况下，我发现用于布局的表格是可以接受的：

HTML：

<table class="wrapper">
    <tr>
        <td>
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in  lobortis ante. Phasellus rhoncus, magna adipiscing consequat viverra,  nibh lectus eleifend neque, eget fermentum massa mauris id felis. Morbi  aliquet fermentum quam ut sollicitudin.
            </div>
        </td>
    </tr>
</table>

CSS：

html, body, .wrapper {
    height:100%;   
}

.wrapper {
    margin: 0 auto; /* center horizontally */
}

.wrapper td {
    height:100%;
    vertical-alignment: middle; /* center vertically */   
}

.content {
    width: 350px;
    background:#ccc;
}

【讨论】：

【解决方案3】：

水平和垂直居中：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
                body div {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    right: 0;
                }
                body div div {
                    position: relative;  
                    top: -262px;
                    height: 525px;                 
                    width: 350px;
                    margin: 0 auto 0;
                    background: #000;
                }
        </style>
    </head>
    <body>
        <div><div>Testing</div></div>
    </body>
</html>

【讨论】：

谢谢，这是一个很好的开始。但这只是把它放在左上角。我删除了我的#body 代码并添加了你的代码。
我使用的是body而不是#body，只需替换它并确保你的body中有两个div。信不信由你，这确实有效，它会以它为中心，保证。