前端面试--水平垂直居中的问题

(一)行内元素水平垂直居中

设置text-align:center文本水平居中,在设置行高就可以.

(二)块元素水平垂直居中

第一种方法,定位配合 margin:;和position: absolute;必须要有宽高才可以使用

第二种方法,父元素设置flex布局.

第三种方法,不用flex布局,父盒子宽高不确定的情况下

使用position: absolute;和 transform: translate

第四种 不用css3变形和flex布局, 父盒子宽高不固定的情况下,要设置宽高,利用position: absolute,和margin auto

 

(三)多行文本垂直居中

父盒子设置text-align:center水平居中,加上display:table属性

子盒设置display:table-cell;和vertical-align:middle