CSS水平垂直居中方案

1 前言

水平居中、垂直居中是前端面试百问不厌的问题。

其实现方案也是多种多样，常叫人头昏眼花。

水平方向可以认为是内联方向，垂直方向认为是块级方向。

下面介绍一些常见的方法。

<div class="container">
    <span class="innerText">Hello,World!span>
div>
1
2
3

2 内联元素的水平垂直居中

首先，常见内联元素有：a、span、em、b、strong、i、button。

2.1 使用弹性布局

使用dispaly: flex将父级容器设置为弹性布局（Flexbox），然后可以通过justify-content: center控制水平居中，使用align-items: center控制垂直居中。

.container {
    height: 100px;
    width: 200px;
    background-color: cadetblue;
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}
1
2
3
4
5
6
7
8
9
10

2.2 使用网格布局

使用dispaly: grid将父级容器设置为网格布局（Grid），然后可以通过place-items: center;控制水平垂直居中。

.container {
    height: 100px;
    width: 200px;
    background-color: antiquewhite;
    display: grid;
    place-items: center;
}
1
2
3
4
5
6
7

place-items是align-items、justify-items的简写。

2.3 使用text-align和line-hight

设置父级容器的text-align: center实现文本水平居中对齐，关键的一步设置行高line-height为容器的高度即可实现文本垂直居中。

为什么设置行高line-height为容器的高度就能实现文本垂直居中？

因为文本的基线位于行高的中间，基线也是文本的中线，设置行高等于高度后，文字就垂直居中了。

.container {
    height: 100px;
    width: 200px;
    background-color: antiquewhite;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中，行高等于高度 */
    line-height: 100px;
}
1
2
3
4
5
6
7
8
9

2.4 使用text-align和display: table-cell

将元素设置为表格单元格，再使用vertical-align: center实现垂直居中。

.container {
    height: 100px;
    width: 200px;
    background-color: antiquewhite;
    display: table-cell;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    vertical-align: middle;
}
1
2
3
4
5
6
7
8
9
10

3 块级元素的水平垂直居中

常见块级元素有：h1-h6、p、div、ul、ol、li等。

<div class="container">
    <div class="innerText">div>
div>
1
2
3

前面介绍的内联元素的水平垂直居中方法也适用于块级元素。下面就不再重复介绍。

3.1 绝对定位+margin: auto

首先，设置父元素为相对定位。

为什么要设置父元素为相对定位？

1. 创建一个提供给子元素的定位坐标系，使得子元素在该坐标系内定位。
2. 绝对定位的元素会脱离正常文档流，并相对于最近的已定位组件进行定位。
3. margin: auto计算居中位置依赖于外部的相对定位的父元素。

设置子元素为绝对定位，其top、left、right、bottom的值设为0，margin为auto即可让子元素自动调整四周距离一样实现水平垂直居中。

.container {
    height: 100px;
    width: 200px;
    background-color: cadetblue;
    position: relative;
}
.innerText {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    /* 水平垂直居中 */
    margin: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.2 绝对定位+负margin

除了自动计算，我们还可以根据长宽手动指定元素移动距离。

使用负margin值实现元素的平移。

.container {
    height: 100px;
    width: 200px;
    background-color: cadetblue;
    position: relative;
}
.innerText {
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.3 绝对定位+transform

使用transform实现元素的平移。

.container {
    height: 100px;
    width: 200px;
    background-color: cadetblue;
    position: relative;
}
.innerText {
    width: 50px;
    height: 50px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15