CSS 垂直居中

 

方法一：外层给： display: table  ---区别： 子元素的 width=100%; 

            内层给： display: table-cell;  vertical-align: middle;   text-align: center; // 内容居中也是可以实现的。

 

方法二： 外层不论是  position: absolute;// position: relative;  对子内容没有影响  ---区别：子元素的宽高= 50%；

                内层给：  position:absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%)---transform:translate(x,y)

 

方法三： 只需要给父级元素   display: flex; justify-content: center; align-items: center;  flex 容器，对项目设置水平和垂直居中

                ---区别： 效果等同于  table-cell   项目的 width = 100%; 

 

方法三：  需要给父元素增加 :after 来占位

                父元素： text-align: center;

                子元素：  display: inline-block; vertical-align: middle;

                父元素 : after   content:''; width:0; height: 100%; display: inline-block; vertical-align: middle;