css flex布局实现文字垂直居中_flex布局文字垂直居中

作者：Cpp五条 | 2024-04-24 07:53:42

踩

flex布局文字垂直居中

在没使用flex之前，垂直居中最常用的方法就是将容器的line-height设置为和容器一样的高度，但这种方法很生硬，每次需要更改容器高度的时候都需要考虑line-height，使用以下这种方法可以实现自适应的垂直居中！

<style>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<style>
    .innner {
        display: flex;
        background-color: #ea4d22;
        height: 100px;
        /* line-height: 100px; */
        /* text-align: center; */
        justify-content: center;
        flex-direction: column;
    }
    .innner2 {
        background-color: #20e64b;
        height: 100px;
        text-align: center;
    }
    .innner3 {
        display: flex;
        background-color: #18a0c2;
        height: 100px;
        /* line-height: 100px; */
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }


</style>
<div class="innner">垂直居中示例</div>
<div class="innner2">水平居中示例</div>
<div class="innner3">垂直水平居中示例</div>

</body>
</html>
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/478343