div 不会以 margin: 0 auto 为中心；答案

【问题标题】：div won't center with margin: 0 auto;div 不会以 margin: 0 auto 为中心；
【发布时间】：2013-12-11 05:41:38
【问题描述】：

我的问题只是让一个 div 居中。

目前，我只有一个简单的 html 文件。我不知道为什么margin: 0 auto 不起作用。

这是我的 html 的布局：

<style type="text/css">

#header {
    width: 100%;
    margin: 0 auto 20px auto;
    height: 50px;
    background-color: #0F6;

}
#navigation {
    width: auto;
    float: right;
        margin: 0 auto;
    display: inline-block;
}
#content {
    background-color: #936;
    margin: 0 auto;
    width: 960px;
    position: relative;
    min-width: 720px;
    max-width: 960px;
}
footer {
    background-color:#0F6;
    width: 100%;
    height: 200px;
}
body {
    background-image: url(images/dark_wall.png);
}

</style>
</head>
    <body>
<div id="header">
  <div id="navigation">This is the nav</div>
</div>

<div id="content">
<div id="content_top">
</div>
<div id="content_middle">
</div>
<div id="content_bottom">
</div>
</div>



<footer>
<div id="footer_div_1"><p>DIV #1</p>
</div>
<div id="footer_div_2"><p>DIV #2</p>
</div>
<div id="footer_div_3"><p>DIV #3</p>
</div>
</footer>



</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">
$(document).ready(function() {
  var bodyHeight = $("body").height();
  var vwptHeight = $(window).height();
  if (vwptHeight > bodyHeight) {
    $("footer").css("position","fixed").css("bottom",0);
  }
});
</script>

<!– Add conditional for IE7 + 8 support –>   
<!–[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

底部的 jquery 只是为了让我的页脚成为一个粘性页脚，因为它是我所学会使用的最简单的方法，并且会产生最少的问题。

这是我的外部 css 文件的内容

@charset "utf-8";
/* CSS Document */

body {
  min-width: 960px;
  background:url(../img/dark_wall.png);
}

html, body {
    margin: 0;
    border: 0;
    width: 100%;
    font-size: 100%;
    font-family: Impact, "Courier New";
}

#footer_div_1 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_2 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

#footer_div_3 {
    display: inline-block;
    width: 33%;
    text-align: center;
}

【问题讨论】：

我忘了说，我要居中的 div 是 div id="content"。

标签： margin

【解决方案1】：

将 div 设置为 div 的宽度居中，并将 margin-left 和 marign-right 设置为 auto。

不要在该 div 中使用 float 属性，也不要使用 display: inline;和显示：内联块；在那个div中

您在 div id="content" 之间没有任何内容，因此该 div 没有可显示的内容。只需为 div id="content" 添加一些内容或设置高度。

【讨论】：

哇...... T__T 我智障......谢谢你的帮助。它完美地解决了我的问题。我会记住这一点，以备将来参考。我刚刚忙于准备结构，我没有意识到添加内容会激活我的 css 的某些部分。再次，谢谢。 =] 我真的很感激。