CSS如何实现垂直居中

我们在CSS布局中，经常遇到子元素无法垂直居中的情况。今天我们就来看一下几种实现子元素内容垂直居中的方法：

1. vertical-align 。该属性可以设置元素的垂直居中，但是该属性是应用于内联元素和display:table-cell的元素。所以，我们可以将父元素设置为display:table，再把子元素设置为display:table-cell。

partent{ display:table; } child{ display:table-cell; vertical-align:middle; }

 

2. 弹性盒子居中。设置margin:auto. 可以使得弹性子元素在两上轴方向上完全居中.

parent{ display: flex;/*外层元素设置为弹性盒子属性*/ } child{ margin: auto;/*内层元素设置margin：auto可实现两轴居中* }

 

3. 弹性布局。弹性布局默认主轴为row（从左到右）,侧轴为colum（从上到下）。align-item:center设置子元素在侧轴方向上居中对齐。

parent{ display: flex; align-items: center;/*垂直*/ justify-content: center;/*水平*/ }

 

4.定位。父元素设置相对定位，子元素设置绝对定位，top:50%。此时子元素左上角而不是中心点移至父元素的50%高度，所以子元素自身需上移50%。

parent{ position:relative; } child{ position:absolute; top:50%; transform:translateY(-50%); }

 

5.设置伪元素。伪元素默认display:inline。需设置为block/inline-block。再设置vertical:middle。

parent:after{ content:''; width:0; height:100%; vertical-align:middle; } child{ display:inline-block; vertical-align:middle; }

 

 

 

 

yezijiang~