本文目錄導讀：

1. 垂直居中
2. 水平居中
3. 綜合應用

CSS布局技巧：文本在盒子中的垂直與水平居中

在網(wǎng)頁設計中，我們經(jīng)常需要將文本置于一個盒子中間，無論是垂直居中還是水平居中，這種布局可以通過CSS輕松實現(xiàn)，本文將介紹幾種常用的方法，幫助你實現(xiàn)文本在盒子中的居中顯示。

垂直居中

要實現(xiàn)文本的垂直居中，可以使用CSS的line-height屬性或者flexbox布局，使用line-height適用于單行文本的情況，對于多行文本，推薦使用flexbox，以下是使用flexbox的示例代碼：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100px; /* 盒子高度 */
}

水平居中

水平居中可以通過設置text-align屬性為center來實現(xiàn)，示例代碼如下：

.container {
  text-align: center; /* 水平居中 */
}

綜合應用

當需要同時實現(xiàn)文本的垂直和水平居中時，可以結(jié)合上述兩種方法，示例代碼如下：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 200px; /* 盒子高度 */
  text-align: center; /* 確保文本在內(nèi)容區(qū)域內(nèi)水平居中 */
}

通過以上方法，你可以輕松實現(xiàn)文本在盒子中的居中顯示，在實際應用中，可以根據(jù)具體需求選擇合適的方法，注意調(diào)整盒子的尺寸和文本的樣式，以達到***佳視覺效果。