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