CSS实现水平垂直居中有哪些方式？

一，父子元素宽度高度固定

初始代码：

<div class="parent">
    <div class="children"></div>
</div>
<style>
.parent{
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
.children{
    width: 100px;
    height: 100px;
    background-color: pink;
}
</style>

界面：

绝对定位

绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示。

方式一(此种方式不固定子元素宽高亦可)

先将元素的左上角定位到元素的中心（top:50%; left:50%）,效果如下：

.parent{
    ...
    position: relative;
}
.children{
    ...
    position: absolute;
    left:50%;
    top:50%;
}

然后通过translate调整元素的中心，到页面的中心。

.children{
    ...
    transform: translate(-50%,-50%);
}

方式二

设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。

.parent{
    ...
    position: relative;
}
.children{
    ...
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

方式三

先将元素的左上角定位到元素的中心（top:50%; left:50%），然后再通过margin负值调整元素中心到页面中心的距离。

.parent{
    position: relative;
}
.children{
    position: absolute;
    top: 50%;
    left: 50%;
    /*自身宽度-100 高度-100  的一半*/
    margin-left: -50px;
    margin-top: -50px;
}

方式四

先将元素的左上角定位到元素的中心（top:50%; left:50%），然后通过calc来计算。

.parent{
    position:relative;
}
.children{
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

弹性盒布局

通过align-items:center 和 justify-center设置容器的垂直和水平方向居中对齐。

.parent{
    display:flex;
    /*主轴居中对齐*/
    justify-content:center;
    /*侧轴居中对齐*/
    align-items: center;
}

二，父元素宽高固定，子元素宽高不固定

基础代码：

 <style>

    .parent{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    .children{
        background-color: pink;
    }

</style>

<div class="parent">
    <div class="children size"> 文本</div>
</div>

界面效果：

绝对定位

先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心

.parent{
    position:relative;
}
.children{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

效果：

设置行高line-height

把children设置为行内元素，通过text-align就可以做到水平居中，通过vertical-align也可以在垂直方向做到居中,最后将children的行高设置为默认值（line-height是可继承的，需要单独设置下子元素的行高）。

.parent{
    line-height: 200px;
    text-align: center;
}
.children{
    display: inline-block;
    vertical-align:middle;
    line-height: initial;
}

css-table布局

通过display设置为table-cell，然后使用text-align 、vertical-align实现水平居中和垂直居中。

.parent{
    display:table-cell;
    text-align: center;
    vertical-align: middle;
}
.children{
    display: inline-block;
}

flex布局

同上面的弹性盒布局

.parent{
    display:flex;
    /*主轴居中对齐*/
    justify-content:center;
    /*侧轴居中对齐*/
    align-items: center;
}

grid布局

这个简单做下了解就可以。

.parent{
    display:grid;

}
.children{
    align-self: center;
    justify-self: center;
}

参考资料

CSS实现水平垂直居中的10种方式 - 掘金
「2021」高频前端面试题汇总之CSS篇 - 掘金