css-垂直居中

前言

水平居中可以简单使用以下两种方式：
margin:0 auto；
text-align:center；
故重点讨论垂直居中

1.（一行文字）设置行高等于父元素高度

line-height: 200px;  //设置行高等于父元素高度

2.（多行文字）verticle-align:middle + 伪元素的方法

//vertical生效的前提是元素的display：inline-block。
.parent::after {
content: '';/* 必须设置 */
display: inline-block;
height: 100%;
vertical-align: middle;
}

.child {
vertical-align: middle;
text-align: center; 
display: inline-block;
}

3.（多行文字）使用表格

display: table-cell;
vertical-align: middle;

4.（block方块）calc计算

position：relative;
top:calc(50% - 40px);//40值得是内部block高度的一半

5.（block）transoform

position: relative;/* 为了让top起作用 */
top:50%;
transform: translateY(-50%);

6.(block) 绝对定位

方法一
//父元素必须设置relative
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
方法二（建议）需要设置初始长宽
position:absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;

7.（block）flex

display:flex;
align-items:center;
justify-content:center;