本文目錄導讀：

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

CSS文本框文字居中的實現(xiàn)方法

在網(wǎng)頁設計中，我們經(jīng)常需要將文本框中的文字居中顯示，以提升用戶體驗和頁面美觀度，通過CSS（層疊樣式表），我們可以輕松地實現(xiàn)這一功能，本文將介紹幾種常見的CSS方法來實現(xiàn)文本框內(nèi)文字的居中顯示。

水平居中

水平居中是讓文本框內(nèi)的文字在水平方向上居中顯示，可以通過CSS的text-align屬性來實現(xiàn)。

.text-box {
  text-align: center;
}

上述代碼將使具有.text-box類的文本框內(nèi)的文字水平居中。

垂直居中

垂直居中則是讓文本框內(nèi)的文字在垂直方向上居中顯示，對于單行文本，可以使用line-height屬性與height屬性配合實現(xiàn)。

.single-line-text-box {
  height: 50px;  /* 設置文本框高度 */
  line-height: 50px;  /* 設置文本行高，與高度相同以實現(xiàn)垂直居中 */
}

對于多行文本，可以使用CSS的display屬性和flexbox布局來實現(xiàn)。

.multi-line-text-box {
  display: flex;
  align-items: center;  /* 使文本垂直居中 */
  justify-content: center;  /* 使文本水平居中 */
}

綜合應用

在實際應用中，我們往往需要將文本在水平和垂直方向上同時居中，這時，可以結(jié)合上述兩種方法，將text-align和display屬性等一起使用。

.centered-text-box {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
  text-align: center;  /* 確保文本在flex容器中居中顯示 */
}

通過CSS的text-align、display、flex等屬性，我們可以輕松實現(xiàn)文本框內(nèi)文字的居中顯示，在實際應用中，可以根據(jù)需求選擇適合的方法來實現(xiàn)文本的居中效果。