css 设置布局居中,CSS 布局简明教程－用 wrapper 让页面居中

不使用 table 分列，而使用 CSS 来分列是个老话题，网上也有很多文章，本教程旨在使用示例解释布局方法及解决常见问题。

兼容性

各浏览器对 CSS 的解释差别很大，尤其是 IE，又尤其是 IE 6，而 IE 6 仍然占有广泛市场，所以不得不考虑。

所以，要使用 DOCTYPE。(其实，即使没有兼容性的问题，也应该使用 DOCTYPE，这是标准。)

上面加上 XHTML 1.0 的 DOCTYPE，这有个好处，就是最大限度的让 IE 的解释向标准看齐，这样可以减少不兼容的地方，虽然减少得不多，但很重要。

XHTML 1.0 有 Strict、Transitional、Frameset，请参见 HTML/XHTML 的 DOCTYPE 大全，根据自己的需要选用。

wrapper

各用户都习惯了用 wrapper 这个名字作为最外层 div 的命名，它的作用就是把页面框起来，好限定宽度及其他设置。

CSS 布局简明教程

.wrapper{margin:auto;width:960px;background-color:#f00;color:#000;}

.sideCol{width:350px;background-color:#0f0;color:#000;}

侧边栏

wrapper 中，让左右 margin 为 auto，就实现了居中。我们还设置了 width 的宽度，这就设置了页面的宽度。

顺便巩固下 CSS 知识：

margin:auto; 上下左右 margin 均为 auto。

margin:0px auto; 上下 margin 为 0px，左右 margin 为 auto。

margin:0px 1px 2px 3px; 上 margin 为 0px，右 margin 为 1px，下 margin 为 2px，左 margin 为 3px。

运行一下示例

CSS 布局简明教程

.wrapper{margin:auto;width:960px;background-color:#f00;color:#000;}

.sideCol{width:350px;background-color:#0f0;color:#000;}

侧边栏

[Ctrl+A 全部选择 提示：您可先修改部分代码，再按运行]