我应该如何居中我的页面？

Question

我的网站有两个部分。主体和侧边栏。正文为 6 英寸，侧边栏可能为 200 像素。如何将页面居中？那么左侧和右侧的空间相等吗？无论分辨率如何，它都应该居中。

严格使用 XHTML 1.0。应该适用于所有主要浏览器或至少 Firefox 和 Chrome。

Answer 1

您可以将左右边距设置为自动：

<div id="wrapper">
  <div id="sidebar"></div>
  <div id="main"></div>
</div>

#sidebar {
    float:left;
    width: 50px;
}
#main {
    width: 150px;
    float:left;
     background-color: yellow;
}
#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}

这也非常便携，甚至可以在旧版 IE 上运行。

更新包装器、侧边栏和主栏需要有宽度。谷歌两列布局，这是一种非常标准的方法。

http://jsfiddle.net/aXLVv/1/ - 查看实际效果。

Answer 2

怎么样？

margin: 0px auto;

设置到最外面的容器

<div id="wrapper">
    <div id="side"></div>
    <div id="main"></div>
</div>

#wrapper { margin: 0 auto; width: 800px; }

Answer 3

我不认为 margin-left: auto;右边距：自动；会起作用的。您需要有一个全局包装器。

Answer 4

body {
    margin-left:  auto;
    margin-right: auto;
}