前端笔记（总结几种水平垂直居中的方式）

wuhairui 2020-04-26 原文

基本是网上看来的，前2种用的较多，第三种是有点黑科技的写法

如果只是水平居中，就可以直接使用margin:0 auto;

<div class="d1_1">
    <div class="d2_1"></div>
</div>

第一种：使用translate

属于transform的一个方法，将div进行百分比xy轴位移。

.d1_1{
    width: 200px;
    height: 200px;
    background-color: red;
}
.d2_1{
    width: 100px;
    height: 100px;
    background: blue;
    transform: translate(50%,50%);/*位移*/
}

当然，最好使用相对定位加绝对定位先，为了不影响其他元素排列

第二种：使用弹性布局flex

大多数用这种方式，设置容器的属性即可，不过要注意浏览器兼容

.d3{
    width: 200px;
    height: 200px;
    background-color: red;
    display: flex;
    align-items: center;/*垂直居中*/
    justify-content: center;/*水平居中*/
}
.d4{
    width: 100px;
    height: 100px;
    background: blue;
}

第三种：这种是黑科技，使用vertical-align

不建议多用也比较麻烦，用到了水平居中、变为行内元素，居中

.d5{
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
}
.d5::after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.d6{
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}