CSS文本框上下居中設置

在CSS中，我們可以通過多種方式將文本框內容上下居中，以下是一些常用的方法：

1、使用vertical-align屬性

vertical-align屬性用于設置元素的垂直對齊方式，我們可以將其設置為middle來實現文本框內容的上下居中。

.text-box {
  vertical-align: middle;
}

2、使用line-height屬性

line-height屬性用于設置元素內文本的行高，我們可以通過調整行高來實現文本的上下居中。

.text-box {
  line-height: 200px; /* 假設文本框高度為200px */
}

3、使用padding屬性

通過調整文本框的內外邊距（padding），我們可以實現文本的上下居中。

.text-box {
  padding: 50px 0; /* 上下內邊距為50px */
}

4、使用Flexbox布局

Flexbox布局是一種現代的CSS布局方式，可以輕松地實現元素的垂直居中。

.text-box {
  display: flex;
  align-items: center; /* 垂直居中 */
}

5、使用Grid布局

Grid布局是另一種現代的CSS布局方式，也可以實現元素的垂直居中。

.text-box {
  display: grid;
  align-content: center; /* 垂直居中 */
}

是幾種常見的實現文本框內容上下居中的方法，你可以根據自己的需求和喜好選擇適合的方式。