CSS水平垂直居中常见方法

CSS 中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。下面详细介绍这几种情况。

# 方法一：元素水平居中

<div class="box">
    <div class="content">
        哇！居中了
    </div>
</div>
<style type="text/css">
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        line-height: 100px; //文字在块内垂直居中   
        text-align: center; //文字居中   
        margin: 0 auto;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 方法二：position 元素已知宽度

父元素设置为：position: relative;
子元素设置为：position: absolute;
距上 50%，据左 50%，然后减去元素自身宽度的距离就可以实现

<div class="box">
    <div class="content">
    </div>
</div>
<style type="text/css">
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        position: relative;
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -50px;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 方法三：position transform 元素未知宽度

如果元素未知宽度，只需将上面例子中的 margin: -50px 0 0 -50px; 替换为：transform: translate(-50%,-50%);

<div class="box">
     <div class="content"></div>
</div>
<style type="text/css">
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        position: relative;
    }
   .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 方案四：flex布局

<div class="box">
    <div class="content"></div>
</div>
<style type="text/css">
    .box {
        background-color: #FF8C00;
        width: 300px;
        height: 300px;
        display: flex; //flex布局
        justify-content: center; //使子项目水平居中
        align-items: center; //使子项目垂直居中
    }
    .content {
        background-color: #F00;
        width: 100px;
        height: 100px;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 方案五：table-cell布局

因为 table-cell 相当与表格的 td，td 为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置 display: inline-block; td 的背景覆盖了橘黄色，不推荐使用

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>
<style type="text/css">
    .box {
        background-color: #FF8C00; //橘黄色
        width: 300px;
        height: 300px;
        display: table;
    }
    .content {
        background-color: #F00; //红色
        display: table-cell;
        vertical-align: middle; //使子元素垂直居中
        text-align: center; //使子元素水平居中
    }
    .inner {
        background-color: #000; //黑色
        display: inline-block;
        width: 20%;
        height: 20%;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#CSS

上次更新: 2024/01/30, 00:35:17

← CSS教程和技巧收藏 CSS给table的tbody添加滚动条→