无论是在面试中还是在实际使用中css垂直居中的问题都是我们绕不开的问题,其实垂直居中主要分为两类:居中元素宽高已知和居中元素宽高未知。
首先是居中元素宽高已知
1.absolute和margin auto的使用
首先根据position:absolute和margin auto,把各个方位的距离设置为0(top:0px,bottom:0px,left:0px,right:0px),如下图
2.absolute和负margin
利用绝对定位百分比50%,再设置margin-top:-50px和margin-left:-50px,如下图
其次是居中元素宽高未知
1.absolute和transform,如下图