在 Web 開發中，佈局一直是 CSS 的一個重要主題，而水平和垂直居中往往是佈局中最常見、最基礎的需求。傳統的居中方法通常需要使用多層嵌套、position、margin 等屬性來實現，代碼繁瑣且不夠靈活。而隨着 CSS 彈性佈局（Flexbox）的引入，水平和垂直居中變得非常簡單、直觀，幾乎可以適應所有的佈局場景。
本文將專注於如何使用 CSS Flexbox 來實現內容的自適應居中，包括水平居中、垂直居中、以及水平和垂直的雙向居中。
什麼是 Flexbox？
Flexbox（彈性佈局）是一種一維佈局模型，主要用於在容器中對齊和分佈項目。與傳統的塊級佈局模型不同，Flexbox 允許子元素在單個方向上（水平或垂直）彈性地對齊，適合響應式設計。
Flexbox 的核心概念是兩個屬性：
- 容器屬性：定義在父容器上，決定子項如何排列。
- 子項屬性：定義在子元素上，控制子元素在主軸和交叉軸上的排列方式。
Flexbox 通過這些屬性使得居中、對齊和分佈元素變得非常簡單。
基礎概念：主軸和交叉軸
在 Flexbox 中，主軸和交叉軸是兩個重要概念。Flexbox 的子項沿着主軸排列，而交叉軸則垂直於主軸。
- 主軸的方向由
flex-direction決定，默認是水平的（row）。 - 交叉軸垂直於主軸，當主軸是水平的，交叉軸就是垂直的。
這兩個軸決定了子項的排列方向和居中方式。Flexbox 提供了 justify-content 和 align-items 兩個屬性，分別用於控制子項在主軸和交叉軸上的對齊方式。
水平居中
要實現水平居中，可以使用 justify-content 屬性。justify-content 控制子項在主軸（默認水平）上的對齊方式。
示例：水平居中
<div class="container">
<div class="item">Centered</div>
</div>.container {
display: flex;
justify-content: center; /* 水平居中 */
background-color: #f0f0f0;
height: 100px;
}
.item {
width: 100px;
height: 50px;
background-color: #007bff;
color: #fff;
text-align: center;
line-height: 50px;
}在這個例子中，justify-content: center 使得 .item 在 .container 的水平中心對齊。只需一個屬性，水平居中即可輕鬆實現。
其他值
除了 center，justify-content 還有其他的取值，例如：
flex-start：子項在主軸起點對齊（默認值）。flex-end：子項在主軸終點對齊。space-between：子項之間平均分佈，首尾項目靠邊。space-around：子項之間均勻分佈，包含首尾的間距。
垂直居中
要實現垂直居中，可以使用 align-items 屬性。align-items 控制子項在交叉軸上的對齊方式。
示例：垂直居中
<div class="container">
<div class="item">Centered</div>
</div>.container {
display: flex;
align-items: center; /* 垂直居中 */
background-color: #f0f0f0;
height: 100px;
}
.item {
width: 100px;
height: 50px;
background-color: #007bff;
color: #fff;
text-align: center;
line-height: 50px;
}在這個例子中，align-items: center 使得 .item 在 .container 的垂直中心對齊。通過控制交叉軸上的對齊方式，可以實現垂直居中。
水平和垂直居中
當我們希望元素在容器中同時實現水平和垂直居中時，可以同時使用 justify-content: center 和 align-items: center。這兩個屬性結合起來，就能夠讓元素在容器的中心點對齊。
示例：水平和垂直居中
<div class="container">
<div class="item">Centered</div>
</div>.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
background-color: #f0f0f0;
height: 100vh; /* 讓容器高度佔滿視窗 */
}
.item {
width: 100px;
height: 50px;
background-color: #007bff;
color: #fff;
text-align: center;
line-height: 50px;
}在這個例子中，.container 通過 display: flex 激活彈性佈局，並結合 justify-content: center 和 align-items: center 實現了 .item 在容器中的水平和垂直居中。這種寫法非常簡潔，適用於大多數居中場景。
居中多個元素
在實際佈局中，我們經常需要居中多個元素。Flexbox 的一個優勢是可以處理多個子項的對齊。下面的例子展示瞭如何在容器中居中多個元素，同時保持它們的相對位置。
示例：居中多個元素
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
background-color: #f0f0f0;
height: 100vh;
gap: 10px; /* 子項間距 */
}
.item {
width: 100px;
height: 50px;
background-color: #007bff;
color: #fff;
text-align: center;
line-height: 50px;
}在這個例子中，gap: 10px 設置了子項之間的間距，justify-content: center 和 align-items: center 依然使得所有子項在容器中心對齊。這個例子展示了 Flexbox 佈局的靈活性，能夠輕鬆管理多個元素的居中和間距。
嵌套佈局：在父子容器中居中
在某些情況下，我們可能希望在父容器內居中一個子容器，然後在子容器中再居中其內部元素。這種嵌套的居中佈局在 Flexbox 中也很容易實現。
示例：嵌套居中佈局
<div class="outer-container">
<div class="inner-container">
<div class="item">Centered</div>
</div>
</div>.outer-container {
display: flex;
justify-content: center; /* 外部容器水平居中 */
align-items: center; /* 外部容器垂直居中 */
background-color: #e0e0e0;
height: 100vh;
}
.inner-container {
display: flex;
justify-content: center; /* 內部容器水平居中 */
align-items: center; /* 內部容器垂直居中 */
background-color: #f0f0f0;
width: 200px;
height: 100px;
}
.item {
width: 100px;
height: 50px;
background-color: #007bff;
color: #fff;
text-align: center;
line-height: 50px;
}在這個例子中：
.outer-container作為外部容器，將.inner-container居中對齊。.inner-container作為內部容器，再次使用justify-content: center和align-items: center來將.item居中對齊。
這種嵌套佈局在實際項目中非常常見，例如彈窗（modal）組件的居中顯示。
總結
通過 Flexbox 的 justify-content 和 align-items 屬性，水平和垂直居中變得非常簡單，代碼更加直觀、簡潔。使用 Flexbox 的優勢在於：
- 語義清晰：只需設置
justify-content和align-items，無需複雜的 margin 或 padding 調整。 - 適應性強：可以處理單個或多個元素的居中，甚至嵌套佈局。
- 靈活性高：支持響應式設計，能夠自適應不同屏幕尺寸。
Flexbox 已成為現代 Web 開發的標準工具之一，理解並掌握其用法，尤其是佈局中的居中對齊技巧，將極大地提升 CSS 佈局的效率和代碼質量。
通過本文的講解，希望你能更深入地理解 Flexbox 在佈局居中方面的使用方法，並能在實際項目中輕鬆應用這些技巧。
