css水平垂直居中方式？

一、设置margin:auto;

<div class="external">
    <div class="inside"></div>
</div>

      使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。此时需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0。

.external {
    position: relative;
    width: 400px;
    height: 60px;
    background: #fff;
}
 .inside {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 20px;
    margin: auto;
    background: red;
}

二、弹性布局：display: flex; 

.external {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 60px;
    background: #fff;
}
.inside {
    width: 40px;
    height: 20px;
    background: red;
}

 三、设置position: absolute；

.external {
    position: relative;
    width: 400px;
    height: 60px;
    background: #fff;
}

       当知道元素宽度和高度时，可以设置margin-top和margin-left为负的宽高的一半。

inside {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 20px;
    margin-top: -10px;
    margin-left: -20px;
    background: red;
}

     　当知道元素宽度和高度时，也可以利用calc计算设置top和left。

.inside {
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 20px);
    width: 40px;
    height: 20px;
    background: red;
}

　　 当未知元素宽度和高度时，可以设置position: absolute和transform: translate(-50%, -50%)。

.inside {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 20px;
    background: red;
    transform: translate(-50%, -50%)
}

四、设置水平对齐和行高

      通过设置text-align 和 line-height 实现单行文本水平垂直居中。

      

<div class="external">
    <div class="inside">水平居中</div>
</div>

.external {
    width: 400px;
    height: 60px;
    background: #fff;
}
.inside {
    line-height: 60px;
    text-align: center;
}

五、设置grid（兼容性不太好，不推荐）

<div class="external">
    <div class="inside">水平居中</div>
</div>

　　设置justify-self、align-self或者margin: auto

.external {
    display: grid;
    width: 400px;
    height: 60px;
    background: #fff;
}
.inside {
    justify-self: center;
    align-self: center;
    // margin: auto;
}

　　设置justify-items、align-items或justify-content、align-content

.external {
    display: grid;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 60px;
    background: #fff;
}

六、设置table-cell

 1 .external {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 400px;
    height: 60px;
    background: #fff;
}
.inside {
    display: inline-block;
}