( ! ) 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
#TimeMemoryFunctionLocation
10.0000361336{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
#TimeMemoryFunctionLocation
10.0000361336{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
#TimeMemoryFunctionLocation
10.0000361336{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 不能正常解析这个方法。不过幸运的是,遇到这种情况出现的几率不是太大,下面是支持这种方法的浏览器:

浏览器版本支持
IE8.0,9.0 ···
IE7.0,标准兼容模式
IE7.0,向前兼容模式(Quirks Mode)
IE6.0,标准兼容模式
IE6.0,向前兼容模式
IE5.5,5.0
Mozilla所有版本
Mozilla Firefox所有当前版本


绝对定位+负边距 (水平居中)

依然是用 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 以下。

显示框架
top