css中怎么是文字垂直居中显示

在CSS中，实现文字垂直居中显示一直是前端开发人员经常遇到的问题，本文将介绍一些实现文字垂直居中的方法。
首先，我们可以使用CSS的line-height属性来实现文字垂直居中，我们只需要将line-height设置为父元素高度的值即可。
例如，下面的HTML代码中，我们将class为box的div元素的高度设置为100px，然后设置line-height为100px，这样就可以使文字垂直居中。

<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> 

另外，我们可以使用CSS的display: table-cell属性来实现文字垂直居中。我们需要将父元素设置为display: table，然后将子元素设置为display: table-cell，再使用vertical-align: middle属性来使子元素垂直居中。

<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> 

除了以上方法，我们还可以使用CSS的transform属性来实现文字垂直居中。我们可以将父元素设置为position: relative，然后将子元素设置为position: absolute，再使用transform属性将子元素向上移动一半自身高度的距离即可。

<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> 

以上三种实现文字垂直居中的方法是比较常用的，通过在项目中合理应用这些方法，可以让我们的网页布局更加美观和实用。