css居中方法
程序员文章站
2022-05-11 12:44:48
...
垂直居中
*** 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%”的属性。
更多内容，参考此网站：http://www.w3cplus.com/css/vertically-center-content-with-css