元素的垂直居中的方法

height: 30px;
line-height: 30px;

display: flex; 
align-items: center;

display: table; /*让元素以表格形式渲染*/
height: 200px; /* 需要定宽，定高 */
width: 100px;

display: table-cell;/*让元素以表格的单元素格形式渲染*/
vertical-align: middle;

position: relative; // absolute，fixed 也可以。只要不是 static。

position: absolute;
top: 50%;
transform: translateY(-50%);