如何实现一个元素的水平垂直居中

这个问题其实应该是“如何实现一个元素相对于父元素的水平垂直居中”，否则范围会大到没法回答。这里现做两个盒子出来。现在假设有两个盒子，分别是 box-a，和 box-b。默认的文档流下，box-b 紧挨着 box-a 的左上角。现在的需求是让box-b在box-a正中间。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .box-a{
        background-color: red;
        width: 200px;
        height: 200px;
    }
    .box-b{
        background-color: green;
        width: 100px;
        height: 100px;
    }
</style>
<div class="box-a"><div class="box-b"></div></div>

方法一：已经知道两个盒子大小的情况下，通过设置margin，padding 实现

既然已经知道了两个盒子的大小，直接算出来不就行了。给box-b设置对应的 margin或者给 box-a 对应的 padding 即可。因此，左右 margin 分别是 (200 - 100) / 2 = 50。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .box-a{
        background-color: red;
        width: 200px;
        height: 200px;
        border:solid red 1px;
        <!-- box-sizing: border-box; -->
        <!-- padding: 50px; -->
    }
    .box-b{
        background-color: green;
        width: 100px;
        height: 100px;
        margin: 50px;
    }
</style>
<div class="box-a">
    <div class="box-b"></div>
</div>

当通过给 box-b 设置 margin 属性来实现垂直居中时，需要给 box-a设置一个 border，否则就会出现边距折叠的现象，从而达不到想要的效果。而通过给box-a设置 padding 实现垂直居中的话，则需要设置另一个属性box-sizing的属性值为’border-box’来实现。看似简单，实际上细节很多，一不小心就会出问题。

方法二 已知盒子大小的情况下，通过定位实现

明确声明box-a是相对定位，box-b是相对定位或者绝对定位，将 box-b的 left，top都设置为 50px。也能实现垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .box-a{
        background-color: red;
        width: 200px;
        height: 200px;
        position: relative;
    }
    .box-b{
        background-color: green;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
    }
</style>
<div class="box-a">
    <div class="box-b"></div>
</div>

方法一和方法二都是简单直接，只要知道盒子大小，就可以直接算出来，做出来。和方法二相比，方法一多出了很多细节，看似简单，实际上坑很多，实际开发也很少用。方法二多出现在一些需要通过 js 来操作的情况下，直接写成 css 代码的也很少见。

方法三 使用绝对定位和百分比 transform

将 box-a 设置为相对定位，box-b 设置为绝对定位，top，left 分别设置为 50%（注意这个 50%是相对于box-a宽和高的），然后设置 transform: translate(-50%, -50%)（这个 50% 是相对于 box-b）则可以实现垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .box-a{
        background-color: red;
        width: 200px;
        height: 200px;
        position: relative;
    }
    .box-b{
        background-color: green;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
    }
</style>
<div class="box-a">
    <div class="box-b"></div>
</div>

这是实际开发中用的比较多的一个方法。

方法四 使用flex实现垂直居中

使用 flex实现垂直居中，也是非常常见的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    .box-a{
        background-color: red;
        width: 200px;
        height: 200px;
        position: relative;
         display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .box-b{
        background-color: green;
        width: 100px;
        height: 100px;
    }
</style>
<div class="box-a">
    <div class="box-b"></div>
</div>

方法五 使用grid实现垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
    .box-a{
        background-color: red;
        width: 200px;
        height: 200px;
        display: grid;
        justify-items: center;
        align-items: center;
    }
    .box-b{
        background-color: green;
        width: 100px;
        height: 100px;
    }
</style>
<div class="box-a">
    <div class="box-b"></div>
</div>

实现垂直居中的方法很多，网上有的人能实现 8 中，12 种，这里罗列几种常见的即可。