CSS實現文本垂直居中

一、使用line-height屬性

使用line-height屬性可以實現文本垂直居中的效果，但注意這種方式只適用於單行文本的情況。

  <div class="box1">
    <p>這是一行文本</p>
  </div>

  .box1 {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .box1 p {
    display: inline-block;
  }

在上面的代碼中，利用line-height屬性將文本的行高設置成盒子的高度，從而實現了文本居中的效果。另外，設置文本對齊方式為居中，同時將文本設置為行內塊元素也很有必要，因為普通的行內元素在沒有內容或者沒有設置寬高的情況下，是無法佔據空間的。

二、使用display:flex

flex布局可以很方便地實現文本垂直居中，這也是目前使用最廣泛的一種方式。

  <div class="box2">
    <p>這是一行文本</p>
  </div>

  .box2 {
    display: flex;
    align-items: center;
  }

在上面的代碼中，通過設置box2為flex布局，然後利用align-items屬性將子元素垂直居中。這種方式非常簡潔、清晰。

三、使用position和transform

如果想要實現文本在一個指定高度的盒子中垂直居中，可以使用position和transform屬性。

  <div class="box3">
    <p>這是一行文本</p>
  </div>

  .box3 {
    position: relative;
    height: 200px;
  }
  .box3 p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

在上面的代碼中，我們將box3定位為相對定位，然後將文本利用絕對定位相對於box3定位。接著，通過將文本的top值設置為50%，將文本的中心點與box3的中心點重合，然後利用transform屬性將文本向上移動一半的高度，從而實現了文本在box3中的垂直居中。

四、使用table-cell布局

使用table-cell屬性和vertical-align屬性可以很輕鬆地實現文本的垂直居中。

  <div class="box4">
    <p>這是一行文本</p>
  </div>

  .box4 {
    display: table-cell;
    vertical-align: middle;
  }

在上面的代碼中，我們將box4設置為table-cell布局，然後使用vertical-align屬性將p元素在垂直方向上居中。這種方式比較適用於需要垂直居中的元素較少的情況。

五、使用calc()函數

如果知道文本的行數和盒子的高度，我們還可以通過calc()函數計算出文本的margin值，從而實現文本的垂直居中。

  <div class="box5">
    <p>這是兩行文本<br>這是第二行</p>
  </div>

  .box5 {
    height: 200px;
    padding: calc((200px - 2em) / 2) 0;
  }
  .box5 p {
    margin: 0;
  }

在上面的代碼中，我們先計算出每一行文本的高度，也就是2em，然後用總高度減去兩行文本的高度，除以2，得到每一行文本上下的padding值。通過這種方式，可以讓兩行文本在盒子中垂直居中。

總結

以上就是實現文本垂直居中的幾種CSS方式，不同的場景選擇不同的方案可以提高代碼的效率和可讀性。