CSS篇|元素垂直居中

57 阅读1分钟

1.设置子元素和父元素的行高一样

2.子元素设置为行内块,再加 vertical-align:middle

3.已知父元素高度,子元素相对定位,通过 transform:translateY(-50%)

4.不知道父元素高度,子绝父相,子元素 top:50%,transform:translateY(-50%)

5.创建一个隐藏节点,让隐藏节点的 height 为剩余高度的一半

6.给父元素 display:table,子元素 display:table-cell,vertical-align:middle

7.给父元素添加伪元素

8.弹性盒,父元素 display:flex,子元素 align-self:center