垂直居中
*** html:
<body>
<div class="father">
<div id="fake"><!--this block have empty content--></div>
<div id="main"></div>
</div>
</body>
*** css:
body,html{
height:100%;
}
#fake{
float:left;
height:50%;
margin-bottom:-90px;
}
#main{
background-color:green;
height:180px;
width:200px;
position:relative;
clear:both;
}
這種方法有點新意,用這種方法你需要在居中元素前面放一個空的<div>(塊元素就可以),然后設置這個<div>的高度為50%,margin-bottom為元素高度的一半,而且居中元素需要清除浮動。需要注意的是,使用這種方法,如果你的居中元素是放在body中的話,你需要給html,body設置一個“height:100%”的屬性。
更多內容,參考此網(wǎng)站:http://www.w3cplus.com/css/vertically-center-content-with-css