我想这个是我们经常遇到的一个问题,当然对很多人来说,这是个很简单,很容易解决的问,在这里我只是把这些常用的方总结下。
一、margin:auto 0 与 text-aligh:center
这个方法我想是大部分人在用的,也是最简单的。我们先设定marign: 0 auto,即上下边距为0,左右为自动,这样在IE7、Firefox、Opera等浏览器中就能实现居中了。
div#wrap {
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;
但这在IE6中是不起作用的,在IE6中我们得用text-align:center.在IE中text-align属性是可继承的,即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text-align属性值为center,这样页面内所有的元素都会自动居中.现在我们修改下代码如下:
body { text-align:center; }
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;
}
div#wrap {
text-align:left;
width:760px;
margin:0 auto;
border:1px solid #666;
background-color:#eee;
}
二:对wrap进行相对定位,然后使用负边距抵消偏移量。
这种方法我想用的人比较少,但这也是一个简单又有效的方法。
我们设置wrap的定位是相对于其父元素body标签的,然后将其左边框移动到页面的正中间(也就是left:50%含意);最后我们再从中间位置向左偏移回一半的距离来,这样就实现了水平居中了。
div#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #666;
background-color:#eee;
}
position:relative;
width:760px;
left:50%;
margin-left:-380px;
border:1px solid #666;
background-color:#eee;
}
三、其它的居中方式
body {
padding:10px 150px;
}
div#wrap {
border:1px solid #666;
background-color:#eee;
}
padding:10px 150px;
}
div#wrap {
border:1px solid #666;
background-color:#eee;
}