关于CSS水平垂直居中的布局，很多场景中都会用到，而且面试中也基本都是必考题。
于是就有了这篇文章，一方面根据自己所学巩固一下记忆，另一方面也能收集一些自己未曾了解到的解决方案，温故而知新。

如非特别声明，以下CSS布局全以以下html结构为准

1
2
3
<div class="wrapper">
    <div class="box"></div>
</div>

使用绝对定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 公共样式部分,以下绝对定位布局皆默认引用此处代码 */
.wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    background: aqua;
}

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: skyblue;
}

一种方案是给父级元素添加相对定位,子元素设置固定定位 top 值和 left 值为 50%;然后设置 margin-top 和 margin-left 值为宽度负值的一半：

1
2
3
4
5
6
.box {
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

使用CSS的calc函数：原理同上，通过calc函数计算得到子元素 top 值和 left 的 50% 减去子元素宽高的一半

1
2
3
4
.box {
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

另一种方案是设置子元素各个方向距离都为0，再使用margin: auto外边距设为自适应

1
2
3
4
5
6
7
8
.box {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: skyblue;
}

利用CSS3新特性transform: translate属性，通过定义元素2d方向的位置来达到水平垂直方向居中

  • 此种方案只要设置子元素top值和left值为50%，且子元素平面方向为基于父元素的50%即可达到目的，因此此种方案子元素无需固定宽高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .wrapper {
        /* ... */
    }

    .box {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 定义自身x轴和y轴基于父元素偏移-50% */
    }

  • 使用绝对定位各种问题比较多，而且只适用于宽高固定的情况，下面来看看宽高不固定的情况

弹性盒布局

  • 弹性盒布局的好用之处在于使用非常方便，只需指定父元素display: flex即可，下面来看看使用flex的处理方案
1
2
3
4
5
.wrapper {
    display: flex;  /* 设置元素为 flex 布局 */
    justify-content: center; /* 设置子元素水平方向居中 */
    align-items: center;    /* 设置子元素垂直方向居中 */
}

短短三行CSS代码，即可完成元素水平垂直方向居中，当然flex布局的强大不止于此，日后我会整理一篇关于详细应用flex布局的文章，这里就不再赘述

Grid 网格布局

  • grid布局同样是很优秀的一种布局方案与flex布局有许多相似之处，但只支持高版本浏览器，兼容性不如flex，grid布局处理元素水平垂直居中，同样只需要三行代码：
    1
    2
    3
    4
    5
    6
    7
    8
    .wrapper {
        display: grid;  /* 声明元素为grid布局 */
    }

    .box {
        align-self: center;     /* 设置自身垂直方向居中 */
        justify-self: center;   /* 设置自身水平方向居中 */
    }

表格布局

  • 如果只是为了水平垂直居中一个元素而使用table来实现，未免太闲了，这里要用到的是css的display: table属性，设置子元素为行内块元素，并设置父元素为table布局，再设置子元素水平方向和垂直方向居中即可
1
2
3
4
5
6
7
8
9
.wrapper {
    display: table;
    vertical-align: middle;
    text-align: center;
}

.box {
    display: inline-block;
}

结语

目前我所知道的关于CSS实现元素水平垂直方向居中的方案就是这些，如果您也有比较好的方案欢迎通过留言提出来，我会整理到文章中，感谢您的分享