css：垂直居中的几个方法

行内元素

垂直居中：

line-height: 设置和父元素高度一样的值 （相当于把子元素的高度撑开，而且刚刚好上下相同） （缺点：适应单行文本）

flex：多行文本也可以

块级元素

grid：

父元素设置 display: grid ， 子元素设置justify-self: center水平居中 + align-self:center垂直居中

绝对定位+transform

父元素相对定位，子元素设置绝对定位 子元素left top50% translate设置-50%

父元素相对定位、子元素设置绝对定位、子元素left top50%后，小方框左上角在父元素中心，因此再将他下移50%，右移50%