div won't center with margin: 0 auto;

问题

My problem is simply centering a div.

At the moment, I just have a bare bones html file. I have no idea why margin: 0 auto isn't working.

Here is the layout of my 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]–>

The jquery at the bottom is simply to make my footer a sticky footer as it is the simplest method I've learned to use that yeilds the least amount of problems down the line.

Here are the contents of my external css file

@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;
}

回答1:

To center the div set width for div and set margin-left and marign-right as auto.

Don't use float property in that div and also don't use display: inline; and display:inline-block; in that div

You don't have any content between div id="content", thus that div has nothing to display. Just add some content or set height for the div id="content".

来源：https://stackoverflow.com/questions/20210998/div-wont-center-with-margin-0-auto

标签

margin