行内元素
垂直居中:
line-height: 设置和父元素高度一样的值 (相当于把子元素的高度撑开,而且刚刚好上下相同) (缺点:适应单行文本)
flex:多行文本也可以
块级元素
grid:
父元素设置 display: grid , 子元素设置justify-self: center水平居中 + align-self:center垂直居中
绝对定位+transform
父元素相对定位,子元素设置绝对定位 子元素left top50% translate设置-50%
父元素相对定位、子元素设置绝对定位、子元素left top50%后,小方框左上角在父元素中心,因此再将他下移50%,右移50%