单行/多行文字垂直居中_-webkit-box; 垂直居中

作者：小舞很执着 | 2024-07-19 20:37:37

踩

-webkit-box; 垂直居中

转自：https://www.cnblogs.com/moqiutao/p/4807792.html

一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

<p style="border:1px solid red;width:600px;height:100px;line-height: 100px;">几个文字或者一行文字的居中对齐 方法：行高与容器高度相同</p>
1

在这里插入图片描述
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

<p style="border:1px solid red;width:300px;height:auto;padding:20px 0px;">一行文字或者几行文字的居中对齐 方法：padding</p>
1

在这里插入图片描述
三、模拟表格法
将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

<div style="display:table;border:1px solid red;width:100px;height:100px;text-align:center;">
    <p style="display:table-cell;vertical-align:middle;">模拟表格法</p>
</div>
1
2
3

在这里插入图片描述
四、CSS3的transform来实现

<div style="border:1px solid red;width:100px;height:100px;">
    <p style="position: relative;top:50%;transform:translateY(-50%);margin:0; ">transform 法  垂直居中</p>
</div>
1
2
3

在这里插入图片描述

<div style="border:1px solid red;width:200px;height:100px;">
    <p style="position: relative;left:50%;transform:translateX(-50%);margin:0; ">transform法 水平居中，(无效)</p>
</div>
1
2
3

在这里插入图片描述
五、css3的box方法实现水平垂直居中

<div class="center">
    <div class="text">
        <p>box法</p>
        <p>我是多行文字</p>
        <p>我是多行文字</p>
        <p>我是多行文字</p>
    </div>
</div>
1
2
3
4
5
6
7
8

.center {
    width: 300px;height: 200px;border: 1px solid red;
    display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;
    display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;
    display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;
    display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;
    display: box;box-orient: horizontal;box-pack: center;box-align: center;
}
1
2
3
4
5
6
7
8

在这里插入图片描述
六、flex布局

<div class="flex">
    <div>
        <p>flex 布局</p>
        <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
        <p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
    </div>
</div>
1
2
3
4
5
6
7

.flex{
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    /*实现水平居中*/
    justify-content: center;
    text-align: justify;width:200px;height:200px;border: 1px solid red;
}
1
2
3
4
5
6
7
8

补充：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<style>
    /* 备注：
    PC端有兼容性要求，宽高固定，推荐absolute + 负margin
    PC端有兼容要求，宽高不固定，推荐css-table
    PC端无兼容性要求，推荐flex
    移动端推荐使用flex */

    *{margin: 0;padding: 0}
    .box{border: 1px solid red;width: 300px;height: 300px;}
    .content{background: yellowgreen;}

    /* 方法一 */
    /* .box{position: relative;}
    .content{width: 100px;height: 100px;}
    .content{position: absolute;top: 50%;left: 50%;margin-top:-50px;margin-left:-50px;  } */
    
    /* 方法二 */
    /* .content{width: 100px;height: 100px;}
    .box{position: relative;}
    .content{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;} */

    /* 方法三： */
    /* .content{width: 100px;height: 100px;}
    .box{position: relative;}
    .content{position: absolute;top:calc(50% - 50px);left:calc(50% - 50px);} */

    /* 方法四： */
    /* .box{position: relative;}
    .content{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)} */

    /* 方法五： */
    /* .box{line-height: 300px;text-align: center;font-size: 0px;}
    .content{font-size: 16px;display: inline-block;vertical-align: middle;line-height: initial;text-align: left;} */

    /* 方法六： */
    /* .six{border: 1px solid red;width: 300px;height: 300px;}
    .six_box{background: yellowgreen;}
    .six{writing-mode: vertical-lr;text-align: center;}
    .six_box{writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;}
    .six_con{display: inline-block;margin: auto;text-align: left;} */

    /* 方法七  table*/
    /* .box{text-align: center}
    .content{display: inline-block;} */

    /* 方法八 */
    /* .box{display: table-cell;text-align: center;vertical-align: middle;}
    .content{display: inline-block;} */

    /* 方法九 */
    /* .box{display: flex;justify-content: center;align-items: center;} */

    /* 方法十 */
    .box{display: grid;}
    .content{align-self: center;justify-self: center;}

    .red{color: red;}
    .blue{color:blue;}
</style>
<body>
    <div class="box">
        <div class="content size">55555</div>
    </div>

    <br/>

    <div class="six">
        <div class="six_box">
            <div class="six_con"></div>
        </div>
    </div>

    <br/>

    <table>
        <tbody>
            <tr>
                <td class="box"><div class="content">1111</div></td>
            </tr>
        </tbody>
    </table>



    <div style="writing-mode: vertical-lr;">文字垂直</div>

    <div class="red blue">123</div>
    <div class="bule red">123</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】