在CSS中,实现文字垂直居中显示一直是前端开发人员经常遇到的问题,本文将介绍一些实现文字垂直居中的方法。首先,我们可以使用CSS的line-height属性来实现文字垂直居中,我们只需要将line-h
<br> <br>
<p>使用line-height属性实现文字垂直居中:</p><br>
<div class="box"><br>
<p>这是一段文字</p><br>
</div><br>
<br> <br>
.box {<br>
height: 100px;<br>
line-height: 100px;<br>
}<br>
<br> <br>
<p>使用display: table-cell属性实现文字垂直居中:</p><br>
<div class="table"><br>
<div class="cell"><br>
<p>这是一段文字</p><br>
</div><br>
</div><br>
<br> <br>
.table {<br>
display: table;<br>
}<br>
.cell {<br>
display: table-cell;<br>
vertical-align: middle;<br>
}<br>
<br> <br>
<p>使用transform属性实现文字垂直居中:</p><br>
<div class="parent"><br>
<div class="child"><br>
<p>这是一段文字</p><br>
</div><br>
</div><br>
<br> <br>
.parent {<br>
position: relative;<br>
height: 100px;<br>
}<br>
.child {<br>
position: absolute;<br>
top: 50%;<br>
transform: translateY(-50%);<br>
}<br>
粉丝
0
关注
0
收藏
0