2018-03-17 前端面试--水平垂直居中

可以分几种情况考虑：

（1）块状元素的水平垂直居中：

利用绝对定位和负margin，这时要给块级元素设置width，height；

利用绝对定位+transform:translate属性，可以使不知块级元素宽高的情况下实现居中。

利用flex盒子，在父元素上设置align-items和justify-items即可实现子块状元素的居中。

还有：对于块状元素，仅仅只实现水平居中的话，可以用margin:0 auto；实现

（2）行内元素的水平垂直居中

在父盒子上使用text-align:center;在子行内元素上设置line-height等于父盒子的height。

将父盒子设置为table类型；子行内元素设置为table-cell类型；设置行内元素的vertical-align;可实现与上面相同的效果。

（3）最后可以使用flex盒子