使元素在浏览器中通过div+css水平、垂直居中
作者：秋了秋 发表时间：2014年08月02日
水平居中就不说了，很容易实现，只要在样式中加入红色的body{text-align: center;}就行了，表格居中只要加个<center><table></table></center>就行了，背景图片居中在样式中加入body{background: url(//img.netblog.site/screenshot.png) #FFF no-repeat center;}就行了。
但要在浏览器中垂直居中就不那么容易了，这是个一直都在讨论的问题，不过还是可以硬性实现的，具体做法为：
<style>
body{text-align: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:100%;
width:100%;
vertical-align:middle;
line-height:600px;
}
</style>
然后把文字或者图像放到<div id="center"></div>里面就行了，所谓硬性就是，line-height:600px;可控制距离顶部的高度，并不能适应全部分辨率，也不是绝对的居中，会随分辨率变动，但是600px适合于大部分分辨率。可运行测试：
0
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/79.html