CCS让元素垂直居中的方法

在父容器中添加display: flex; align-items: center; (侧轴居中) justify-content: center; (主轴居中)。这两个属性是垂直还是水平方向居中要看flex-direction定义的主轴是哪个方向。

 是不是有点绕人了，那就举个栗子：flex-direction:row;justify-content: center;水平居中。

子元素position: absolute; top: 50%;同时margin-top值为子元素高度的一半，因为设置top值时是相对于盒子顶部，所以想要居中还要往上移动半个盒子的高度才能实现。

在父容器中添加display: flex;子元素设置align-self: center;

子绝父相，同时设置子元素的top,bottom,left,right值为0，最后设置margin:auto;实现块元素的垂直+水平居中。

设置子容器为display: table-cell;vertical-align: middle;父容器设置display:table

把元素变成定位元素position:absolute;left:50%;top:50%;同时设置元素的左外边距margin-left、上外边距margin-top分别为宽高的负1/2。

vertical-align: middle;这个适用于行内元素的垂直居中，块元素不可以。

display：inline-block;verticle-align:middle;

设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。