css实现居中

一、行内元素居中：

    1、水平居中：父元素设置：text-align: center;

    2、垂直居中：行内元素设置：line-height: 父元素高度;

    3、水平垂直居中：综合1和2；

二、行内块元素居中：

    由于行内块元素既有行内元素的属性又有块元素的属性，所以可以参考相关居中方法。

三、块元素居中：

        1、margin居中方法：margin: 0 auto; 

        2、绝对定位与负边距的全居中方法---需要固定待居中元素的宽高属性，扩展性较差

            在需要居中的元素上设置如下属性：

.center {
   width: 500px;
   height: 500px;
   position: absolute;
   top: 50%;/*距离顶部50%高度*/
   left: 50%;/*距离左边50%高度*/
   margin-top: -250px;/*顶部回退高度的50%*/
   margin-left: -250px;/*左边回退宽度的50%*/
}

3、绝对定位与自动边距实现全居中---无需知晓元素宽高值

.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

4、利用flexbox实现居中---无需知晓元素宽高值，注意flex布局的兼容性，可参考

      https://blog.csdn.net/qq_39364032/article/details/79744032

.flexbox {
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;
}

<div class="box flexbox">
    <div class="blue">blue</div>
</div>

blue是放在box里的，如此设置后，box下面的所有直接子集元素都会全居中，并呈水平排列。

5、利用表格单元居中---无需知晓宽高，例如：行级元素inline，行块级元素inline-block。只适用于行内元素和行内块元素。

.table {

    display: table-cell;

    text-align: center;

    vertical-align: middle;

}

<div class="box table"><span>我是居中内容</span></div>

6、使用transform 2D转换 实现元素全居中---无需知晓元素宽高值

.transform {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}