css垂直居中

标签：com   shu   select   底部   bottom   使用   detail   idt   ott   

参考链接：

http://www.jianshu.com/p/eecb80ae1b18

http://blog.csdn.net/wolinxuebin/article/details/7615098

其中一种方法（这种方法只是把要居中的元素顶部，用清除浮动的方法顶住了浮动元素的底部，然后再设置position:relative;提升层级！）：

html

<div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
</div>

css

#parent {height: 250px;}

#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}

#child {
    clear: both;
    height: 100px;
}

设置一个浮动的子div元素，并且设置其高度等于父div元素的50%。这样子div元素就会充满父div元素的上半部分。

因为这个子div元素从正常的文档流中移除了，所以我们需要清除其它子元素两边的浮动，这里使用了clear:both，但是实际上只需要清除和浮动元素相同方向上的浮动就可以了。

此时另一个非浮动子div元素的上边框应该与浮动子div元素的下边框重合，然后需要把非浮动子div元素往上移动其高度的一半，可以通过设置浮动子div元素的margin-bottom值为负的非浮动子div元素高度的一半来实现。

css垂直居中

标签：com   shu   select   底部   bottom   使用   detail   idt   ott   

原文地址：http://www.cnblogs.com/zhangzs000/p/6266538.html