css 垂直居中

1.flex

当希望一个元素垂直居中的时候，又不想操作这个元素

可以在该元素的父元素上设置

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

2.子元素的 margin 0 auto只能 水平居中（常规文档流）

3.text-align是元素文本对齐方式（设置在父元素上）水平方向

 4.水平垂直居中，子元素相对定位，top，let设为50%，transform: translate(-50%, -50%); 
这种方式并不会释放子元素在文档中所占的位置