随笔-内容垂直居中的方法

1、最常用的line-height
对于平时使用的一行的文字或者按钮之类的进行居中设置的时候建议使用;
通过设置height以及line-height将会自动让文字垂直居中：

height: 20px;
line-height: 20px; // 垂直居中
text-align: center; // 水平居中

2、align-items:center
通过dislay:flex将布局设置为flex，通过align-items:center的属性配置内容垂直居中：

display: flex;
align-items: center; // 垂直居中
justify-content: center; // 水平居中

3、padding
通过调整padding的大小给元素加上一个内部的空间完成居中效果
4、vertical-align:middle
表格拥有自己的属性vertical-align:middle能够将cell的内容进行居中处理；非表格的元素可以使用display来达成表格的居中效果：

<div style="display:table">
	<div style="display:table-cell; vertical-align:middle;">居中内容</div>
</div>

以上是比较常见的一些居中方法，还有一些用margin-top: -xx px、position:absolute; top: -xx px的比较少，就不做介绍了