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

阿新 • • 發佈：2021-06-26

一、水平居中

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>

View Code

效果圖：

二、垂直居中

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>