CSS：网页居中

( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\CSS\CSS2_02.php on line 14
Call Stack
#	Time	Memory	Function	Location
1	0.0000	359880	{main}( )	...\CSS2_02.php:0

( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\CSS\CSS2_02.php on line 14
Call Stack
#	Time	Memory	Function	Location
1	0.0000	359880	{main}( )	...\CSS2_02.php:0

( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\CSS\CSS2_02.php on line 14
Call Stack
#	Time	Memory	Function	Location
1	0.0000	359880	{main}( )	...\CSS2_02.php:0

如何使用 CSS 将网页居中呢？

最好的例子就是这个网页本身，中间这一部分以“绝对水平居中”呈现在你的屏幕里，如果你的屏幕不是小的可怜都可以展示这种效果，你可以左右调整浏览器的宽度，网页内容会跟着做适当调整，依旧是以“绝对水平居中”的姿态绝对不会让你失望。

外边距自动模式居中

<body>是整个网页的容器，所有的文字、图片、flash、音频等等都放在这里面，为了实现网页居中，并且让你的网页更优质，我们需要一个 div 标签，为其设置 id="Frame"（框架），网页中的所有内容都将存放在这里面。

CSS 代码如下：

#Frame{

width:1000px;

margin:auto;

}

对，就这两行代码，这种自动外边距居中的方法是国际很多网页设计师推崇的，整个 div 块元素上下左右四个外边距 margin 都设置为了 auto，因为左右外边距都是自动，也就意味着 div 距离屏幕可视区域的左右两边是相等的，所以网页自然就水平居中了。

那，div 上下外边距也是设置为自动，它不久也垂直居中了？如果你想到了这一点，我想对你说，这个你想多了，各大主流浏览器是不支持这一用法的。

这种方法有时也会失效，存在一定的风险。

在测试的时候，用不同的 IE6 IE7 打开同一网页，有的能正常工作，有的却不然。

这是什么原因呢，其实，这是 IE 浏览器版本兼容性的问题，IE6 IE7 各存在一种版本是 Quirks Mode（怪异模式），这种怪异模式版本的 IE6 IE7 不能正常解析这个方法。不过幸运的是，遇到这种情况出现的几率不是太大，下面是支持这种方法的浏览器：

依然是用 div 作为框架（容器）承载整个网页。id="Frame"。

直接看 CSS，代码如下：

#Frame{

position:absolute;

left:50%;

width:1000px;

margin-left:-500px;

}

如果你还没有接触过 CSS 的 position 属性，强烈建议先去熟悉下。

这个方法稍微涉及到了一点点计算，为了让你更深刻的理解这种方法，我做了三个网页加以说明。

[ 1 ] 这个未加CSS的原始网页，"Frame" 距离屏幕左边为0.	[查看]
[ 2 ] 推开：网页添加绝对定位后，left="50%","Frame" 左边框将屏幕一分为二。	[查看]
[ 3 ] 拉回：将 "Frame" 宽度的二分之一设为 margin-left，"Frame"回归。	[查看]

绝对定位+负边距（垂直居中、垂直水平居中）

有了水平居中的这个范例，垂直居中的代码我也就不打出来了。很简单的。

但是得提醒一下，"Frame" 的高度和宽度必须保持在 body 的高度和宽度之内，不然也体现不出完美的绝对居中了。尤其是垂直居中，你要考虑到笔记本等小屏用户的用户体验。

垂直居中使用推荐："Frame" 高度控制在 450-500px 以下。