Question

如果您查看Yahoo!主页，则会在页面中找到所有内容，如果您调整浏览器窗口的大小，则会删除左右空格，然后会出现滚动条。我想要同样但无论我做什么，我都做不到：

<body>
<div id="main" >
   <div class="logo"></div>
   <div class="content"></div>
   <div class="copyright"></div>
</div>
</body>

我希望main位于页面的中心（宽度是固定的，但边距不是）。

Answer 1

在css中将它设置为这样。

#main {
   width: 960px;/*put your width*/
   margin: auto;
}

Answer 2

第一种方式：

#main {
  position:relative;
  width:600px;
  left:50%;
  margin-left:-300px;
}

jsFiddle example

第二种方式：

body {
  text-align:center; /* Optional: IE5/6 Quirks Mode Hack */
}

#main {
  width: 600px;
  margin: 0 auto;
  text-align:left; /* Optional: IE5/6 Quirks Mode Hack */
}

jsFiddle example

Answer 3

注意：此css在IE中不起作用。解决方案：

<style type="text/css">
body{text-align: center}

</style>

来自：http://www.cosnetics.co.uk/articles/IE7-margin-auto-not-working/

把孩子放在父元素的中心

3 个答案: