css居中几种情况

水平居中

（1）.对于行内元素（inline） ：  父元素设置属性   text-align:center

（2）. 对于块级元素（block）： 设置宽度 和 margin-left:auto;margin-right:auto;

（3）.对于多个块级元素（inline-block）：父元素设置text-align:center;子元素设置 display:inline-block;

垂直居中

行内元素

        （1）对于单行的行内元素：设置父元素的height  line-height值相等。或者设置上下的padding值相等。

        （2）对于多行的行内元素：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素

块级元素

        （1）已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

        （2）未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

        （3）使用 Flexbox：选择方向，justify-content: center;

水平垂直居中

（1）定高定宽：先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉

（2）高度和宽度未知：先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);

（3）使用 Flexbox：justify-content: center; align-items: center;