如何設置css文字水平垂直居中

# 如何設置CSS文字水平垂直居中

在網頁設計中，文字的水平垂直居中是常見的布局需求。本文將詳細介紹6種實現方法，涵蓋單行文本、多行文本以及彈性布局等多種場景。

## 1. 單行文本居中（已知高度）

對于已知高度的容器，使用`line-height`是最簡單的方法：

```css
.container {
  height: 100px;
  line-height: 100px; /* 與高度相同 */
  text-align: center;
}

注意：此方法僅適用于單行文本，多行文本會出現錯位。

2. 使用padding實現

通過等值padding讓內容自然居中：

.container {
  padding: 40px 0;
  text-align: center;
}

優點是不需要指定具體高度，適合高度不固定的場景。

3. transform平移法（未知高度）

絕對定位結合transform的經典方案：

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

此方法適用于寬高都不確定的情況。

4. Flexbox布局（現代推薦方案）

使用CSS3彈性布局是最便捷的方式：

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

5. Grid布局方案

CSS Grid提供另一種簡潔實現：

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

6. table-cell方法（兼容舊瀏覽器）

模擬表格單元格的居中特性：

.container {
  display: table;
  width: 100%;
}
.content {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

方法對比表

最佳實踐建議

1. 移動端優先：優先使用Flexbox方案
2. 需要兼容IE：考慮table-cell或transform方案
3. 動態內容：推薦使用padding或transform
4. 復雜布局：Grid布局更具優勢

掌握這些方法后，開發者可以根據具體項目需求選擇最適合的居中方案。 “`

注：本文代碼示例已通過Chrome/Firefox/Edge最新版驗證，實際開發時建議添加瀏覽器前綴以獲得更好兼容性。