CSS垂直居中

学习自b站技术蛋老师
1、使用padding

只需设置上下边距，，，但是不能设置高度。

2、使用line-height

设置子元素高度与父元素高度相等，，，p标签需要把margin设置为0；；；；且适用于单行文字

3、Flexbox

设置display为flex；；方向为从上到下flex-direction:column；；加上中间对齐：justify-content:center;;;;但是IE9以上兼容。

4、table

设置display：table；；子元素设置display:table-cell；vertical-align：middle；不是做表格一般不采用。

5、grid栅格布局

 display：grid；
 设置等分排列 grid-template-columns:repeat（6，1fr）；
 在设置居中：align-items:center;
 justify-content:center;
 适合多行多列，兼容性低

6、absolute

给父元素设置相对定位：display：relative

子元素设置 display:absolute
top：50%；
transform：translateY（-50%）或者
margin-top：具体数值px；偏移自身高度的一半的具体数值。
、、、、但是脱离文档流了
7、伪元素实现
以后再补充吧