css垂直居中总结

前言

　　垂直居中布局的一些总结心得，初学者可以拿来即用。

　　元素分类已经在《css水平居中总结》中讲过，这里就不多赘述了。

一、单行文本垂直居中

在单行文本中使用如下方式进行垂直居中：

height: 300px;

line-height: 300px;

二、正式的垂直居中

1.直接在外层套一层table进行垂直居中，简单方便快捷，此方法适用于所有元素。缺点是多了一些无语义标签。

<table>
　　<tbody>
　　　　<tr>
　　　　　　<td>
　　　　　　　　<div>
　　　　　　　　　　 我想垂直居中！
　　　　　　　　</div>
　　　　　　</td>
　　　　</tr>
　　</tbody>
</table>

2.使用css3的flexbox进行垂直居中，要在父元素中写入display: flex和align-items:center，此方法适用于所有元素，但是存在IE不兼容的情况，PC页面慎用。

.father{
　　width: 960px;
　　height: 300px;
　　background: yellow;
　　display: flex;
　　display: －webkit-flex;
　　align-items:center;
　　-webkit-align-items: center;
}

内容持续更新中...

原创文章，手打不易，如需转载烦请注明出处。如有错误的地方或者更好用的方法，希望大家能在评论区留言指正，让我们共同进步！