Question

我正在设计一个网站，这是我上传之前需要的最后一个网站。我搜索过这个网站和其他许多网站，但老实说无法找到合适的解决方案。我将尽我所能。

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。

非常感谢。

Answer 1

水平和垂直居中：

<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>

Answer 2

如果在设置了宽度的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为中心。这适用于左/右中心。

Answer 3

解决方案：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;
}

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

3 个答案: