将 400px 宽的 div 水平居中对齐在具有上边距的全宽 div 内答案

【问题标题】：Put 400px wide div horizontally center aligned inside a full width div with top margin将 400px 宽的 div 水平居中对齐在具有上边距的全宽 div 内
【发布时间】：2011-07-18 03:34:16
【问题描述】：

请看这段代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .header {
height: 200px;
background-color: #CCCCCC;
text-align: center;
    }
    .contents {
background-color: #0099FF;
text-align: center;
height: 400px;
    }
    .footer {
    background-color: #993300;
height: 100px;
    }
    .footer .footer-contents {
margin-top: 30px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
width: 700px;
    }
    -->
    </style>
    </head>

    <body>
    <div class="header">Header</div>
    <div class="contents"> Body </div>
    <div class="footer">
    <div class="footer-contents">
    Some contents goes here
    </div>
    </div>


    </body>
    </html>

我看到正文和页脚之间存在间隙，因为我为页脚内容 div 设置了 30 像素的上边距。为什么我可以将一个 div 放在另一个有一些上边距的地方，由于这个边距，当你在浏览器中看到它时，整个页脚 div 添加了 30 px 的边距，我可以通过添加填充而不是边距来解决这个问题，但我想知道如果我想将一个 700px 宽的 div 水平居中放置在一个 100% 宽的整页 div 中，并且我想在内部 div 中添加一些边距。

【问题讨论】：

标签： html css

【解决方案1】：

将除“footer-contents”div 之外的一些内容添加到“footer”div。例如：

<div class='footer'>&nbsp;
    <div class='footer-contents'>
        Some contents goes here
    </div>
</div>

在这种情况下，我将边距正确应用于内部 div。

http://jsfiddle.net/Fq64H/1/

希望这会有所帮助。

鲍勃

【讨论】：

感谢 rcravens，只有有什么不同吗？我很惊讶，这是唯一的方法吗？