在 CSS 中，有很多種方法可以實現水平和垂直置中，可以在不同情境使用自己習慣的方式。
這邊詳細介紹三種常用的方式：

// 以下案例使用此結構：

<div class="container">
    <div class="element">hi!</div>
</div>

## 1. **Flexbox**
Flexbox 是一種現代的佈局模型，可以輕鬆地實現水平和垂直置中。
作用對象是在要置中的**容器**上。

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

在這個例子中，我們將容器設置為 `flex`，然後使用 `justify-content` 和 `align-items` 屬性來實現水平和垂直置中。

### 優點：
Flexbox 是一種強大的佈局工具，可以輕鬆處理元素的對齊、方向和順序。它對於創建響應式佈局非常有用。
### 缺點：
Flexbox 的學習曲線可能會有點陡峭，特別是對於新手來說。另外，它在一些舊的瀏覽器版本中可能不被完全支持。
### 適用場景：需要在行或列中對齊元素，或者需要創建響應式佈局時，Flexbox 是一個很好的選擇。

## 2. **Grid**：
CSS Grid 也是一種現代的佈局模型，可以輕鬆地實現水平和垂直置中。
作用對象是在要置中的**容器**上。

.container {
  display: grid;
  justify-content: center; /* 水平置中 */
  align-items: center; /* 垂直置中 */
}

### 優點：
Grid 提供了創建二維佈局的能力，這是 Flexbox 所不能做到的。它對於創建複雜的網頁佈局非常有用。
### 缺點：
與 Flexbox 一樣，Grid 的學習曲線也可能會有點陡峭，並且在一些舊的瀏覽器版本中可能不被完全支持。
### 適用場景：當你需要創建複雜的 layout 時，Grid 是一個很好的選擇。
**我自己實務上通常是在父元素已有 grid 佈局的情況下才會搭配使用**
在這個例子中，我們將容器設置為 `grid`，然後使用 `justify-content` 和 `align-items` 屬性來實現水平和垂直置中。

## 3. **Positioning**：
如果你的元素是絕對定位的，你可以使用 `top`、`right`、`bottom` 和 `left` 屬性，配合 `transform` 屬性來實現水平和垂直置中。
作用對象是在要置中的**元素**上。

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

在這個例子中，我們將元素設置為絕對定位，然後將其 `top` 和 `left` 屬性設置為 `50%`，最後使用 `transform` 屬性的 `translate` 函數將元素向上和向左移動其自身的一半，從而實現水平和垂直置中。

### 優點：
可以讓你精確地控制元素的位置。
### 缺點：
使用 Positioning 來實現水平和垂直置中需要多個步驟，並且可能需要調整以適應不同的瀏覽器。
此外，絕對定位的元素可能會脫離文檔流，這可能會導致佈局問題。
### 適用場景：當你需要精確地控制元素的絕對位置，或者需要將元素脫離文檔流時，Positioning 是一個很好的選擇。

## 各種水平和垂直置中的比較表格：
最後，整理 CSS 中實現水平和垂直置中的幾種方法的比較：
（表格包括另外兩種方式：專對於文本進行垂直置中的`Line-height` ，與用於表格的垂直置中的 `vertical-align: middle`）

| 方法 | 描述 | 優點 | 缺點 |
| --- | --- | --- | --- |
| Flexbox | 使用 `display: flex`，`justify-content: center` 和 `align-items: center` 可以輕鬆實現水平和垂直置中。 | 簡單易用，適用於各種大小的元素。 | 在舊的瀏覽器版本中可能不被支持。 |
| Grid | 使用 `display: grid`，`justify-content: center` 和 `align-items: center` 可以實現水平和垂直置中。 | 可以輕鬆創建複雜的二維佈局。 | 在舊的瀏覽器版本中可能不被支持，並且對於簡單的佈局可能有些過度。**通常是在父元素已有 grid 佈局的情況下才會搭配使用**|
| Positioning | 使用 `position: absolute`，`top: 50%`，`left: 50%` 和 `transform: translate(-50%, -50%)` 可以實現水平和垂直置中。 | 對於需要精確定位的元素非常有用。 | 需要多個步驟，並且可能需要調整以適應不同的瀏覽器。絕對定位的元素可能會脫離文檔流，這可能會導致佈局問題。 |
| Line-height | 對於單行文本，可以使用與元素高度相同的 `line-height` 來實現垂直置中。 | 對於單行文本非常有用。 | 只適用於單行文本，並且不適用於多行文本或者內含其他元素的容器。 |
| Table-cell | 使用 `display: table-cell` 和 `vertical-align: middle` 可以實現垂直置中。 | 可以用於垂直置中多行文本或者內含其他元素的容器。 | 需要額外的元素或者偽元素來實現水平置中，並且在某些情況下可能會有兼容性問題。 |