Fork me on GitHub

水平垂直居中对齐

发表于 | 分类于

实现元素的水平垂直居中对齐是页面布局中很常用的一种方法。一般要实现垂直居中的元素可以是文字，某个块级元素，或者是图片。

初始化页面高度

在开始前，需要补充的一个知识点是：如何让页面高度刚好占满屏幕高度？

若想让一个div的高度与屏幕高度自适应，始终占满屏幕高度，需要从html层开始层层添加height: 100%，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper"></div>

<style>
    html, body{
        height:100%; 
        width:100%; 
        margin:0;
        padding:0;
    }
    .wrapper {
        height: 100%;
        background: #ddd;
    }
</style>

html没有padding和margin，body没有padding有margin，块级元素宽度默认占满整行，所以上面的代码也可以改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="wrapper"></div>

<style>
    html {
        height: 100%;
    }
    body {
        height: 100%;
        margin: 0;
    }
    .wrapper {
        height: 100%;
        background: #ddd;
    }
</style>

行级元素的居中

水平居中

1
2
3
4
5
6
7
8
9
10
11
<div class="wrapper">
    <span>要设置的文字</span>
</div>

<style>
    .wrapper {
        width: 300px;
        border: 1px solid black;
        text-align: center;
    }
</style>

要居中的元素包在块级父层元素内，设置父级text-align: center;行级块元素也可以水平居中(img，input)。
单行文本水平居中

垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrapper">
    <span>要设置的文字</span>
</div>

<style>
    .wrapper {
        width: 300px;
        height: 100px;
        border: 1px solid black;
        line-height: 100px;
    }
</style>

此方法通过给父级(或元素本身)设置line-height等于父级的高度来实现元素的垂直居中。适用于父级高度已知时，给单行文本设置垂直居中。img标签不适用此方法。
单行文本垂直居中

水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="wrapper">
    <span>要设置的文字</span>
</div>

<style>
    .wrapper {
        width: 300px;
        height: 100px;
        border: 1px solid black;
        line-height: 100px;
        text-align: center;
    }
</style>

父级高度已知的单行文本设置水平垂直居中，通过text-align: center;和line-height等于父级高度来实现。
单行文本水平垂直居中

块级元素的居中

水平居中

(1)适用于单个块级元素，当左右边距设置为auto时可以设置水平居中

1
2
3
4
5
6
7
8
9
10
<div></div>

<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 0 auto;
      }
</style>

页面显示如下：
单个块级元素水平居中

(2)设置元素为行级块元素，让元素根据自身大小占据空间。然后给父级设置text-align来实现子级元素在父级元素水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="father">
    <div></div>
    <div></div>
    <div></div>
</div>

<style>
   .father {
        text-align: center;
    }
    .father div {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: orange;
    }
    .father div:not(:last-child) {
        margin-right: 10px;
    }
</style>

:not()除什么之外，当有多个元素时，如果给每个子级div都设置右边距时最后一个元素后边相应的也会有边距。然后总体来看就是第一个元素的左边和最后一个元素的右边剩余的大小是不一致的。所以最后一个元素不用设置右边间距。

页面显示如下：
块级元素水平居中

(3)flex布局，最常用的居中方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="father">
    <div></div>
    <div></div>
    <div></div>
</div>

<style>
    .father {
        display: flex;
        justify-content: center;
    }
    .father div {
        width: 100px;
        height: 100px;
        background: green;
    }
    .father div:not(:last-child) {
        margin-right: 10px;   
    }
</style>

主要就是通过给父级元素设置display: flex;属性为弹性弹性元素，然后设置主轴justify-content对齐方式为居中对齐。

页面显示如下：
块级元素水平居中

水平垂直居中

如果想让元素刚好在屏幕最中央，需要先对页面进行初始化，让div元素刚好占满屏幕高度来实现页面布局。

1
2
3
4
5
6
7
8
9
<style>
    html {
        height: 100%;
    }
    body {
        height: 100%;
        margin: 0;
    }
</style>

在将页面初始化后，可以通过以下几种方式来实现元素的垂直水平居中。如果不想要元素在整个页面中垂直居中，可以通过调节父级元素的宽高来设置。

(1)绝对定位 + 负边距实现(需要知道设置的元素的宽，高)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="father">
    <div class="son"></div>
</div>

<style>
    .father {
        position: relative;
        height: 100%;
        background: #ddd;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background: red;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>

父级相对定位，子级绝对定位，子级相对于父级来挪动位置。当给子级设置top: 50%和left: 50%时子级的左顶点刚好在父级中心，所以子级需要相对父级左移，上移。设置子级margin-top和margin-left为自身高度和宽度的负的一半。

页面显示如下：
块级元素水平垂直居中

以下几种方法无需知道被居中元素的大小：

(2)绝对定位 + css3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="father">
    <div class="son"></div>
</div>

<style>
    .father {
        position: relative;
        height: 100%;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: green;
    }
</style>

translate(-50%,-50%) 作用是：往上（x轴）,左（y轴）移动自身宽度，高度的 50%，以使其居于中心位置

页面显示如下：
块级元素水平垂直居中

(3)绝对定位 + margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="father">
    <div class="son"></div>
</div>

<style>
    .father {
        position: relative;
        height: 100%;
    }
    .son {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>

子元素相对父元素绝对定位，margin设置为auto时默认只能在水平方向上居中。只有给元素设置top, left, right, bottom时才能看到父级元素的宽和高，此时再设置margin: auto;元素就能根据父级进行居中

页面显示如下：
块级元素水平垂直居中

(4)margin + flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="father">
    <div class="son"></div>
</div>

<style>
    .father {
        display: flex;
        height: 100%;
    }
    .son {
        width: 100px;
        height: 100px;
        background: orange;
        margin: auto;
    }
</style>

margin: auto只能设置水平方向上的居中，所以如果要在垂直方向上居中。首先，需要设置父级高度，然后设置父级为display: flex

页面显示如下：
块级元素水平垂直居中

(5)flex布局，最常用的布局方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="father">
    <div class="son"></div>
</div>

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    .son {
        width: 100px;
        height: 100px;
        background: orange;
    }
</style>

给父级容器设置为弹性盒子，主轴(水平方向)设置justify-content: center，交叉轴(垂直方向)设置align-items: center即可实现元素水平垂直居中。

其中，这两个属性都是需要设置在父级容器上才会生效。

页面显示如下：
块级元素水平垂直居中