CSS实现网页水平居中
2015-6-14 14:39:30 类别：DIV+CSS摘要：CSS+DIV架构 最基础的就是网页水平居中,这里详细介绍了4种(自动边距,文本居中,自动边距+文本居中,负边距)常用解决方案供大家参考.
方法一:使用自动边距实现(代码如下)
1 | body{ |
2 | margin:0 auto; |
3 | width:900px; |
4 | } |
注:这种方法对在IE6.0下无法兼容
方法二:使用text-align:center
1 | body{ |
2 | text-align:center; |
3 | } |
注:此方法其实是文本居中,在大部分浏览器中只要将文本居中,而无法将容器位置居中.另外子容器继承父容器样式,故需要对子容器文本对齐方式重新设定.
方法三:自动边距和文本对齐二合一
1 | body{ |
2 | text-align:center; |
3 | } |
4 | .container{ |
5 | width:900px; |
6 | text-align:left; |
7 | margin:0 auto; |
8 | } |
注:这种方法有效的结合了2者的特征 使用自动对齐就是为了解决IE6.0下自动边距居中的hark
方法四:使用负外边距实现网页居中
1 | .container{ |
2 | position:absolute; |
3 | left:50%; |
4 | width:900px; |
5 | margin-left:-450px; |
6 | } |
注:其实这种方法是用数学公式实现的网页居中,通过绝对定位二分居中,在许多对联广告中,学被用于定位广告浮动位置.不失为一种通用且兼容性好的方法
PS:本人经常使用第三种方法.