CSS水平居中与垂直居中的方法

一、水平居中

1、行内元素水平居中

在父元素里添加text-align：center即可。代码如下：

<style>
.container-1 {
        height: 50px;
        border: 2px solid grey;
        margin-bottom: 50px;
        /* 行内元素水平居中  */
        text-align: center;
    }
</style>
<div class="container-1">
        <span>this is item1</span>
</div>

效果图：

2、块级元素水平居中

（1）方法一：使用绝对定位和margin负值（缺点：若子元素宽高改变，margin值也要跟着改变）

（2）方法二：使用绝对定位和transform（缺点：存在兼容性问题）

（3）方法三：使用绝对定位和margin：auto（推荐）

（4）方法四：使用flex布局的justify-content：center（缺点：存在兼容性问题）

代码如下：

 1 <style>
 2 /* @块级元素水平居中方法： */
 3     /*  方法一：使用绝对定位和margin负值*/
 4     .container-2 {
 5         position: relative;
 6         height: 100px;
 7         border: 3px solid blue;
 8         margin-bottom: 50px;
 9     }
10
11     .item2 {
12         position: absolute;
13         height: 50px;
14         width: 300px;
15         left: 50%;
16        /* 向左平移宽度的一半 */
17         margin-left: -150px;
18         background-color: burlywood;
19     }
20
21     /* 方法二：使用绝对定位和transform */
22     .container-3 {
23         position: relative;
24         height: 200px;
25         border: 5px solid rgb(182, 60, 12);
26         margin-bottom: 50px;
27     }
28
29     .item3 {
30         position: absolute;
31         left: 50%;
32         /*水平方向向左平移自身宽度的50%*/
33         transform: translateX(-50%);
34         background-color: yellow;
35     }
36
37     /* 方法三：使用绝对定位和margin：auto*/
38     .container-4 {
39         position: relative;
40         height: 100px;
41         border: 4px solid green;
42         margin-bottom: 50px;
43     }
44
45     .item4 {
46         position: absolute;
47         left: 0%;
48         right: 0%;
49         height: 50px;
50         width: 500px;
51         background-color: pink;
52         /* 平分子元素左右的剩余空间 */
53         margin: auto;
54     }
55
56     /* 方法四：使用flex布局 */
57     .container-5 {
58         display: flex;
59         height: 100px;
60         border: 4px solid rgb(27, 164, 189);
61         margin-bottom: 50px;
62         /* 主轴方向默认为水平方向，使用justify-content实现居中对齐 */
63         justify-content: center;
64     }
65
66     .item5 {
67         height: 50px;
68         width: 500px;
69         background-color: rgb(194, 255, 192);
70     }
71 </style>
72 <div class="container-2">
73         <div class="item2">使用绝对定位和margin负值</div>
74 </div>
75 <div class="container-3">
76         <div class="item3">使用绝对定位和transform</div>
77 </div>
78 <div class="container-4">
79         <div class="item4">使用绝对定位和margin：auto</div>
80 </div>
81 <div class="container-5">
82         <div class="item5">使用flex布局</div>
83 </div>

效果图：

二、垂直居中

1、行内元素垂直居中

当line-hight等于height时，可实现行内元素垂直居中，代码如下：

 1 <style>
 2 .container-1 {
 3         height: 50px;
 4         border: 2px solid grey;
 5         margin-bottom: 50px;
 6         /* 行内元素水平垂直居中  */
 7         text-align: center;
 8         line-height: 50px;//行高与高相等可实现垂直居中
 9     }
10 </style>
11 <div class="container-1">
12         <span class="item1">this is item1</span>
13 </div>

效果图：

2、块级元素垂直居中

（1）方法一：使用绝对定位和margin负值（缺点：若子元素宽高改变，margin值也要跟着改变）

（2）方法二：使用绝对定位和transform（缺点：存在兼容性问题）

（3）方法三：使用绝对定位和margin：auto（推荐）

（4）方法四：使用flex布局，改变主轴方向为垂直方向再使用justify-content：center（缺点：存在兼容性问题）

代码如下：

<style>
 /* @块级元素垂直居中方法： */
    /*  方法一：使用绝对定位和margin负值*/
    .container-2 {
        position: relative;
        height: 100px;
        border: 3px solid blue;
        margin-bottom: 50px;
    }

    .item2 {
        position: absolute;
        height: 50px;
        width: 300px;
        top: 50%;
        /* 向上平移高度的一半 */
        margin-top: -25px;
        background-color: burlywood;
    }

    /* 方法二：使用绝对定位和transform */
    .container-3 {
        position: relative;
        height: 300px;
        border: 5px solid rgb(182, 60, 12);
        margin-bottom: 50px;
    }

    .item3 {
        position: absolute;
        height: 100px;
        width: 300px;
        top: 50%;
        /* 垂直方向向上平移自身高度的50% */
        transform: translateY(-50%);
        background-color: yellow;
    }

    /* 方法三：使用绝对定位和margin：auto*/
    .container-4 {
        position: relative;
        height: 100px;
        border: 4px solid green;
        margin-bottom: 50px;
    }

    .item4 {
        position: absolute;
        top: 0%;
        bottom: 0%;
        height: 50px;
        width: 500px;
        background-color: pink;
        /* 自动平分上下的剩余空间 */
        margin: auto;
    }

    /* 方法四：使用flex布局 */
    .container-5 {
        display: flex;
        height: 100px;
        border: 4px solid rgb(27, 164, 189);
        margin-bottom: 50px;
        /* 将主轴方向改为垂直方向 */
        flex-direction: column;
        /* 对齐方式对居中对齐 */
        justify-content: center;
    }

    .item5 {
        height: 50px;
        width: 500px;
        background-color: rgb(194, 255, 192);
    }
</style>
<div class="container-2">
        <div class="item2">使用绝对定位和margin负值</div>
</div>
<div class="container-3">
        <div class="item3">使用绝对定位和transform</div>
</div>
<div class="container-4">
        <div class="item4">使用绝对定位和margin：auto</div>
</div>
<div class="container-5">
        <div class="item5">使用flex布局</div>
</div>

效果图：

若想实现水平垂直居中，结合二者一起使用即可。

参考文档

https://www.jianshu.com/p/7bbc4860a45c