元素的垂直居中（方法）

元素的垂直居中（方法）

1.如果是图片，直接设置img的属性 vertical-align：middle；前提是需要设置父级元素为块级元素并且设置高度
2.如果是单行文本，可以通过设置子元素的 line-height 值等于父元素的 height，这种方法适用于子元素为单行文本的情况。
3.通过定位父元素 position: relative

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

4.通过伪元素:before 实现 CSS 垂直居中

父元素:before{
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
} 

5.通过 display:table 实现,给父元素设置 display:table，子元素 display： table-cell 的
方式实现 CSS 垂直居中
6.通过 display:flex 实现，给父元素设置 display:flex; 子元素 align-self:center