面试篇：实现水平垂直居中的几种方式

一、利用flex布局实现

（1）利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式

给容器设置：

• display: flex;写在父元素上这就是定义了一个伸缩容器

• justify-content主轴对齐方式，默认是横轴，将其设置为center

• align-items 纵轴对齐方式，默认是纵轴，这里将其设置为center

（2）给父盒子设置为flex后，给子盒子设置margin:auto

二、通过绝对定位实现

给父元素设置position值为relative

子元素设置position值为absolute，top:50%,left:50%,transfrom: translate(-50%, -50%)

三、利用table-cell实现垂直居中

给普通元素添加table属性后，可让其变为table元素的效果

table单元格中的内容天然就是垂直居中的，所以我们只需设置水平居中就行

（1）使用tabel-cell实现垂直居中,容器设置 display: table-cell;;

（2）vertical-align: middle属性设置元素的垂直对齐方式（必不可少）

（3）子元素如果是块级元素，直接使用左右margin:auto实现水平居中。如果是行内元素，给容器设置text-align: center

利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联（行内）元素inline, 内联块（行内块）inline-block元素皆有效。