常用的垂直居中的方法

①该方法只是针对内容是文本元素，对块元素不起作用，并且最好是文本元素比较少的时候，多行的时候容易若同时也设置overflow:hidden;会出现断词。

<div class="content">
    这是一行文本
</div>

.content{
    width:200px;
    height:200px;
    line-height: 200px;
}

②这种方法是本人一直比较喜欢的
在需要垂直居中的元素上方写一个浮动，但是高度是父元素50%的元素，然后再次设置，margin-bottom:垂直居中元素高度一半的负值；

但是一定要记得对垂直居中的元素设置清浮动clear:both;

虽然添加了空标签，但是相对而言还是可以的；

<div class="main">
    <div class="floater"></div>
    <div id="content">
        asdfasfasfd
    </div>
</div>

.main{
    height:500px;
    width:500px;
    background: green;
}
.floater{
    float:left;
    height:50%;
    margin-bottom: -100px;
}
#content{
    clear:both;
    height:200px;
    line-height: 200px;
    width:200px;
    background: pink;
    overflow: hidden;
}

同时还有别的三种方法，是别人总结的，大家参考一下：

http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html

另外：vertical-align:middle;只是再table相关元素中实现比较好，别的元素支持度不高；