居中方式总结

经典真题

怎么让一个 div 水平垂直居中

盒子居中

首先题目问到了如何进行居中，那么居中肯定分 2 个方向，一个是水平方向，一个是垂直方向。

水平方向居中

水平方向居中很简单，有 2 种常见的方式：

设置盒子 margin : 0 auto：这种居中方式的原理在于设置 margin-left 为 auto 时，margin-left 就会被设置为能有多大就设置多大，所以盒子会跑到最右边，而设置 margin-right 为 auto 时，同理盒子就会跑到最左边。所以，当我们设置左右的 margin 都是 auto 的时候，盒子就跑到了中间，从而形成了水平居中。
第二种常见的方式就是通过 display : flex 设置盒子的外层盒子是一个弹性盒，然后通过 justify-content : center 使得内部的盒子居中。

垂直方向居中

关于盒子的垂直方向居中，方法就比较多了，这里介绍几种：

通过 verticle-align:middle 实现垂直居中

通过 vertical-align:middle 实现垂直居中是最常使用的方法，但是有一点需要格外注意，vertical 生效的前提是元素的 display：inline-block。并且在使用 vertical-align:middle 的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align 对齐的方法是寻找兄弟元素中最高的元素作为参考。

代码示例如下：

<div class="container">
    <div class="item"></div>
    <div class="brotherBox"></div>
</div>

.container {
    width: 500px;
    height: 300px;
    background-color: pink;
    text-align: center;
}

.item {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    vertical-align: middle;
    /* 对inline-block不起作用*/
    margin: 0 auto;
    display: inline-block;
}

.brotherBox {
    height: 100%;
    width: 2px;
    background: red;
    display: inline-block;
    vertical-align: middle;
}

通过伪元素 :before 实现垂直居中

平白无故添加一个无意义的参考元素不怎么好，我们可以去除作为参考的兄弟元素，转为给父元素添加一个伪元素，如下：

<div class="container">
    <div class="item"></div>
</div>

.container {
    width: 500px;
    height: 300px;
    background-color: pink;
    text-align: center;
}

.container::before {
    content: "";
    height: 100%;
    width: 2px;
    background-color: red;
    display: inline-block;
    vertical-align: middle;
}

.item {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    display: inline-block;
    vertical-align: middle;
}

通过绝对定位实现垂直居中

这种方式需要设置父元素为相对定位，子元素为绝对定位，然后配合 margin-left 为负的盒子高度一半来实现垂直居中

<div class="container">
    <div class="item"></div>
</div>

.container {
    width: 500px;
    height: 300px;
    background-color: pink;
    position: relative;
}
.item {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

通过 transform 实现垂直居中

可以通过定位配合 transform 也可以实现垂直居中

<div class="container">
    <div class="item"></div>
</div>

.container {
    width: 500px;
    height: 300px;
    background-color: pink;
    position: relative;
}
.item {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50px) translateY(-50px);
}

使用弹性盒子居中

通过设置父元素为弹性盒子，然后使用 justify-content: center 和 align-items: center 来设置内部盒子水平垂直居中

<div class="container">
    <div class="item"></div>
</div>

.container {
    width: 500px;
    height: 300px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

以上就是比较常见的盒子居中的解决方案，当然目前来讲最推荐的就是使用弹性盒子，这是目前最常用的一种方式，也是最推荐的一种方式。

真题解答

怎么让一个 div 水平垂直居中

参考答案：
通过 verticle-align:middle 实现垂直居中
通过父元素设置伪元素 :before ，然后设置子元素 verticle-align:middle 实现垂直居中
通过绝对定位实现垂直居中
通过 transform 实现垂直居中
使用弹性盒子居中

EOF