如何讓文本在垂直方向居中？

一、如何讓文本框中的文字垂直居中

在HTML中，可以使用vertical-align屬性來設置元素內容在垂直方向上的對齊方式，但是這種方法只對行內元素（如、、等）和表格單元格

如果要讓塊級元素（如、

等）垂直居中，可以使用flex布局。

.wrapper{
  display: flex;
  justify-content: center; //水平居中
  align-items: center; //垂直居中
}

如上代碼所示，通過設置display: flex屬性，將.wrapper元素變為一個“彈性布局容器”，然後分別設置justify-content和align-items屬性為center，就可以實現塊級元素內容在水平和垂直方向上的居中對齊。

二、文本框中文字垂直方向怎樣居中選取

在實際開發中，除了需要讓元素本身垂直居中，還需要讓元素內部的文本垂直居中。常見的文本框元素有textarea和input[type=”text”]，那麼如何讓它們內部的文本垂直居中呢？

針對textarea元素，可以通過設置line-height等於元素高度來實現內部文本垂直居中對齊。代碼示例如下：

textarea{
  height: 100px;
  line-height: 100px;
}

這樣就可以讓textarea元素內部的文本在垂直方向上居中對齊了。

對於input[type=”text”]元素，可以採用類似的方法。但是注意，如果直接設置input元素的line-height屬性，會發現文本的上下間距更大了。這是因為input元素內部有padding屬性導致的。解決方法是設置padding值為0，然後再設置line-height屬性。示例代碼如下：

input[type="text"]{
  height: 30px;
  padding: 0;
  line-height: 30px;
}

三、其他實現方法

除了以上介紹的方法，還有一些其他的實現垂直居中的方法，可以根據具體情況選用。

1. 使用絕對定位

可以將元素設置為絕對定位，並設置top和bottom或margin-top和margin-bottom為0，這樣可以讓元素在垂直方向上居中。

.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

2. 使用表格布局

可以使用表格布局將元素內容垂直居中。示例代碼如下：

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

3. 使用transform屬性

可以使用transform屬性將元素相對於父元素的中心位置進行平移。具體實現方法是：將元素的top和left屬性都設置為50%，然後使用translate(-50%, -50%)將元素向左和向上平移一半自身寬度和高度的距離。示例代碼如下：

.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

總結

以上介紹了幾種實現文本在垂直方向上居中對齊的方法，具體使用哪種方法需要根據具體情況靈活選用。總之，掌握了這些方法，就能夠輕鬆實現各種垂直居中的需求。