如何實現文本的垂直居中對齊

在Web開發過程中，我們經常需要處理文本水平和垂直居中的問題。本文將詳細介紹如何實現文本的垂直居中對齊，包括CSS方法和JavaScript方法。本文假設你已經掌握了基本的CSS和JavaScript知識，如果不了解，請先學習相關內容。

一、CSS方法

1、使用flex布局實現垂直居中對齊

CSS3的flex布局可以方便地實現垂直和水平居中對齊。在父元素上設置display:flex和align-items:center即可實現垂直居中對齊。示例代碼如下：

.parent {
  display: flex;
  align-items: center;
}
.child {
  /* 省略樣式 */
}

2、使用vertical-align屬性實現垂直居中對齊

在table-cell元素中，vertical-align屬性可以控制元素的垂直對齊方式。在父元素上設置display:table和height屬性，子元素設置display:table-cell和vertical-align:middle即可實現垂直居中對齊。示例代碼如下：

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

二、JavaScript方法

1、使用getBoundingClientRect方法實現垂直居中對齊

使用JavaScript可以獲取元素的位置和尺寸信息，從而實現垂直居中對齊。可以通過getBoundingClientRect方法獲取元素的位置和尺寸信息，計算出需要設置的top和margin-top屬性值。示例代碼如下：

var parent = document.querySelector('.parent');
var child = document.querySelector('.child');
var parentRect = parent.getBoundingClientRect();
var childRect = child.getBoundingClientRect();
var top = parentRect.top + (parentRect.height - childRect.height) / 2;
child.style.top = top + 'px';
child.style.marginTop = 0;

2、使用CSS變數和calc函數實現垂直居中對齊

CSS3的變數和calc函數可以計算出需要設置的top和margin-top屬性值，從而實現垂直居中對齊。在父元素上設置–height變數和height屬性，子元素設置top和margin-top屬性。示例代碼如下：

.parent {
  --height: 200px;
  height: var(--height);
  position: relative;
}
.child {
  position: absolute;
  top: calc(var(--height) / 2 - 1em);
  margin-top: -0.5em;
}

總結

本文介紹了CSS和JavaScript兩種實現文本垂直居中對齊的方法。其中，CSS方法使用了flex布局和vertical-align屬性，JavaScript方法使用了getBoundingClientRect方法和CSS變數和calc函數。在實際項目中，可以根據具體情況選擇適合的方法。