css:实现多行文本居中的五种方法_牛奶面包吖的博客

作者：笔触狂放9 | 2024-07-19 20:45:38

踩

牛奶面包吖的博客

1.父display: table;+子display: table-cell;+vertical-align: middle

设置的代码：

.father{
    width: 400px;
    height: 400px;
    background-color: red;
    display: table;
}
.son{
    background-color: orange;
    display: table-cell;
    vertical-align: middle;
}
</style>
<body>
    <div class="father">
        <div class="son">
            <span> 1.父元素使用display: table;和子元素 display: table-cell;
            来模拟表格，子元素再使用vertical-align: middle即可实现垂直居中。</span>
        </div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

设置之后的效果：
在这里插入图片描述

2.父 height+ line-height+子display：inline-block+vertical-align: middle+line-height

<style>
.father{
     
 1
2
3

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