display：box、display：flex实现多⾏⽂本垂直居中统⼀的样式
⽂字⽔平居中text-align: center;
.box{
height: 200px;
width: 200px;
background-color: #DDDDDD;
text-align: center;
margin: 20px;
padding: 0 20px;
}
1、单⾏⽂本垂直居中
设置⾏⾼line-height 和⽗元素相同
<style>
.box-sigle{
line-height: 200px;
}
</style>
<h2>单⾏</h2>
<div class="box box-sigle">
<p>单⾏⽂本</p>
</div>
2、多⾏⽂本垂直居中table
使⽤display: table; 垂直居中
<style>
.box-more-table{
display: table;
}
.box-more-table p{
display: table-cell;
vertical-align: middle;
}
</style>
css设置文字垂直居中
<h2>多⾏ table</h2>
<div class="box box-more-table">
<p>多⾏⽂本, 多⾏⽂本, 多⾏⽂本, 多⾏⽂本, 多⾏⽂本, 多⾏⽂本</p> </div>
3、多⾏⽂本垂直居中flex
使⽤display: flex; 垂直居中
<style>
.box-more-flex{
display: flex;
align-items: center;
}
</style>
<h2>多⾏ flex</h2>
<div class="box box-more-flex">
<p>多⾏⽂本, 多⾏⽂本, 多⾏⽂本, 多⾏⽂本, 多⾏⽂本, 多⾏⽂本</p> </div>
总结
1、块元素垂直居中问题采⽤ flex 解决。
2、⾏内元素垂直居中问题解决如下：
1）单⾏
该元素 css 属性 line-height 的值与该元素的⽗级元素 css 属性 height ⼀致即可。2）多⾏
设置该元素 css 属性：display: table-cell; vertical-align: middle;，
还需设置该元素的⽗级元素 css 属性：display: table;。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。