Demo Fiddle

body{
    width:100%; /* <--- make the document content the width of the viewport */
    text-align:center; /* <--- centre the document content */
    margin:0;
}
div{
    margin:0 auto; /** <-- align the content to the centre of the document */
    width:500px; /** <-- width of your content */
}

Answer 2

如果我理解正确您正在寻找一个仍然响应的中心容器？如果是这样，您可以在内容上设置max-width，然后使用margin: 0 auto;将其置于中心位置。

最大宽度意味着容器将是100％宽，直到1200px然后停止，使您的响应能力低于1200.

e.g。

container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

Answer 3

JS小提琴 - ＆gt; http://jsfiddle.net/ma3y77bt/

以下是正在使用的HTML：

<div class="main-content">
    <div class="header">Header</div>
    <div class="body-content"></div>
    <div class="footer">Footer</div>
</div>

为了拥有跨越页面宽度的固定页眉和页脚，首先需要定义主体容器的尺寸。为此，请简单应用以下内容：

html, body {
    position: relative;
    width: 100%;
    height: 100%;
}

接下来，您可以定义标题的尺寸。我们在这里使用绝对定位来始终确保标题位于所有其他元素之上。

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
 }

**此外，通过将高度与行高匹配，内容也是垂直对齐的。

对于页脚，我们会做同样的事情，除了在正文内容后将其与页面底部对齐。

.footer {
    postion: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #999;
}

请参阅jsfiddle以获取示例

如何在css中正确居中100％宽度的div

3 个答案:

Demo Fiddle