「前端开发」 -

CSS-Layout-10

CSS布局 —— 实现元素垂直水平居中

Posted by eliochiu on November 17, 2022

行内元素的垂直和水平居中

如果想使文字、行内元素、行内块元素在块元素内水平和垂直居中,可以采用下列的方法:

  • 水平居中:text-align: center
  • 垂直居中:line-height等于height

例如:让一段文字水平垂直居中:

1
2
3
<div class="father">
    12345
</div>
1
2
3
4
5
6
.father {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}

效果如下图所示:

再例如:让一个行内元素垂直居中:

1
2
3
4
5
<div class="father">
    <span class="son">
        12345
    </span>
</div>
1
2
3
4
5
6
7
8
9
10
.father {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}

.son {
    background-color: skyblue;
}

效果如下图所示:

块级元素的垂直和水平居中

margin

使用margin: 0 auto可以实现块元素在块元素内的水平居中:

1
2
3
<div class="father">
    <div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
.father {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.son {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: deeppink;
}

效果如下图所示:

该方法只能实现水平方向的居中

table布局

将父元素设置为display: tabletext-align: centervertical-align: center,子元素设置为display: table-cell。可以让大小不固定的元素居中:

1
2
3
4
5
6
<div class="father">
    <div class="son">
        11111111
        <br><br>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
    display: table;
    width: 200px;
    height: 200px;
    background-color: pink;
}

.son {
    display: table-cell;
    width: 100px;
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

效果如下图所示:

flex布局

将父元素通过display: flex设置为弹性容器,并设置justify-content: center; align-items: center居中对齐:

1
2
3
<div class="father">
    <div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: pink;
}

.son {
    width: 100px;
    height: 100px;
    background-color: deeppink;
}

效果如下图所示:

定位+translate

父元素设置position: relative, 子元素设置绝对定位,并使用transform偏移:

1
2
3
<div class="father">
    <div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.father {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: pink;
}

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: deeppink;
}

效果如下图所示:

定位+calc

父元素设置position: relative, 子元素设置绝对定位,并使用transform偏移:

1
2
3
<div class="father">
    <div class="son"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: pink;
}

.son {
    position: absolute;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    width: 100px;
    height: 100px;
    background-color: deeppink;
}

效果如下图所示: