在css中对body标签使用margin:0 auto;后,body应该是会居中的,问题是微软在IE8中不支持了,oprea、火狐、谷歌这3款浏览器都支持。
那么怎样使得各个浏览器都能居中呢?
<style>
body{
text-align:center;/*这个使得body中的内容水平居中,div属于body的内容,所以div自然也就居中了*/
}
#center{
border:1px solid black;/*在实际使用中提倡不适用边框,这里仅仅是便于理解而已*/
width:400px;
margin:0 auto 0 auto;/*这个使得div在friefox等其他浏览居中*/
height:33%;/*div的高度为body的1/3,*/
top:33%;/*设置顶端定位为1/3,而div的高度又占据了1/3,所以下面的空余自然也是1/3了。这样div就可与垂直居中了*/
position:relative;
text-align:left;
}
</style>
<body>
<div id="center">
fasfdsafdfdsaf
</div>
</body>
评论