html - CSS - 居中对齐

Question

我终于尝试取消表格并使用 CSS。

我有 3 个 DIV，它们构成了一个三层布局:页眉、正文和页脚。我现在试图在这些层的顶部叠加一个 900 像素宽的 DIV，居中对齐，它将包含我的一些内容和导航按钮。

这些是3层:



这(在 Photoshop 中完成)是我想要实现的，但对眼睛是透明的:



我的 3 个基础层是这样编码的:

<div id="main" style="width:100%; z-index:1; position:relative;">
    <div id="header" style="width:100%; height:175px; text-align:center; background:#151515; z-index:1;"></div>
    <div id="contents" style="width:100%; height:400px; position:relative; background:#FFF; z-index:1;"></div>
    <div id="footer" style="width:100%; height:200px; position:relative; background:#151515; z-index:1;"></div>
</div>

我确实设法让一个新层坐在上面，但它没有居中对齐。有人可以指出我正确的方向吗？

Answer 1

这样的事情可能会有所帮助:
JSFiddle:http://jsfiddle.net/DSH5J/
地址:

<div id="square"></div>

#square {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
    margin-top:50px;
    width:80%;
    height:100%;
    background-color:#333;
    z-index:10;
}