Bing Yee程序人生

关注互联网产品技术学习,应用开发~

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:本人经常使用第三种方法.

2388次阅读  标签:CSS,居中
下一篇:域名未备案应急方案
上一篇:记录一下,博客开通

共23条评论

pkccqbvwrp(1楼)-2014-4-26 10:41:17
审核中

home(2楼)-2016-11-4 8:59:29
审核中

Edycrurse(3楼)-2020-4-24 21:14:44
审核中

发表评论

文章分类


友情链接