CSS 水平置中技巧
這篇教學會介紹多種 CSS「水平置中」的實用技巧，運用對齊、margin 以及 Flex 彈性排版、Grid 網格排版等方式，將元素套用水平置中的效果，最後還會示範同時垂直水平置中的做法。
延伸閱讀：CSS 垂直置中技巧
快速導覽：
水平置中技巧列表
水平置中通常只需要依靠 CSS 所提供的水平置中功能以及基本原理，就能實現水平置中效果，這些做法較為彈性且符合大多數情境，是較為推薦的方法，由於水平置中相對垂直置中而言相當簡單，因此不建議使用其他類似定位的方式進行水平置中，避免修改版面時還要進行額外的設定或調整。
| 水平置中技巧 | 作用元素 |
|---|---|
| text-align: center | 行內容器 ( inline-* ) |
| margin: 0 auto | 區塊容器 |
| flex 排版 justify-content: center | 彈性容器 |
| grid 排版 justify-content: center | 網格容器 |
文字對齊 text-align:center
文字對齊 text-align 是最常見的水平置中技巧，主要是讓文字進行靠左、靠右或水平置中，運用這個樣式屬性就能讓元素水平置中，使用時需注意下列事項：
- 詳細參考：text-align 水平對齊
text-align具有繼承特性，會影響子元素以及其內容。text-align只影響inline-*相關顯示類型的元素，如果要作用於區塊容器，必須要將區塊容器改成inline-block。
下方範例會使用三組 div 呈現 line-height 垂直置中的不同，三組 div 中不同元素的行高都不同，但如果都是行內容器，會採用同層級的最大行高，如果是區塊容器，區塊容器的高度就會隨行高發生變化。
<!-- HTML 程式碼 -->
內容為行內容器 ( 水平置中 )
<div class="a">Apple <span>banana</span> <br> <em>oxxo</em> <strong>papaya</strong></div>
內容區塊容器改成 inline-block ( 水平置中、內容也水平置中 )
<div class="b"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
內容為區塊容器 ( 只有內容水平置中 )
<div class="c"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
<!-- CSS 程式碼 -->
<style>
div {
height: 100px;
width: 300px;
border: 1px solid #000;
margin: 5px 0 20px;
text-align: center; /* 父元素設定水平置中，因繼承特性，子元素也都水平置中 */
}
div * {
margin: 0;
width: 120px;
border: 1px solid #000;
background: #fa6;
}
.b * {display: inline-block;} /* 修改區塊容器的顯示類型 */
</style>
外邊界 margin: 0 auto
外邊界 margin 可以設定元素的外邊界，當左右外邊界設定為 auto 時，會自動分配同樣的數值，進而產生水平置中的排版效果，使用時需注意 margin: 0 auto 只影響「區塊容器」，上下的外邊界值不會影響垂直置中效果，只會影響元素彼此之間的間距 ( 使用時可能會發生外邊界重疊現象 )。
詳細參考：外邊界 margin
下方範例會使用 margin: 0 auto 進行水平置中的排版 ( 第三組 div )。
<!-- HTML 程式碼 -->
margin: 0 auto; 不影響行內容器
<div class="a">Apple <span>banana</span> <br> <em>oxxo</em> <strong>papaya</strong></div>
內容區塊容器改成 inline-block，也不會被 margin: 0 auto 影響
<div class="b"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
margin: 0 auto; 影響區塊容器
<div class="c"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
<!-- CSS 程式碼 -->
<style>
div {
height: 100px;
width: 300px;
border: 1px solid #000;
margin: 5px 0 20px;
}
div * {
margin: 0 auto; /* 區塊容器水平置中 */
width: 120px;
border: 1px solid #000;
background: #fa6;
}
.b * {display: inline-block;}
</style>
flex 排版 justify-content: center
當元素顯示類型為 flex，子元素都會轉換為彈性項目，這時可以透過彈性排版的方式，透過 justify-content 樣式屬性，讓「子元素」進行單行元素或多行元素的水平對齊，雖然內容元素都會變成彈性項目，但卻是相當實用的水平置中技巧。
- 詳細參考：Flex 元素的對齊方式
justify-content作用於「彈性容器」。- 這種方式會將子元素轉換成彈性項目，因此子元素都需要用標籤包覆。
- 設定
flex-wrap:wrap彈性項目換行，換行後的彈性項目也會根據設定進行水平對齊。
下方範例會使用 flex 排版的 justify-content 進行「單行」與「多行」元素的垂直置中。
<!-- HTML 程式碼 -->
justify-content: center;
<div class="a"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
justify-content: center; 搭配 flex-wrap: wrap; 換行
<div class="b"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
<!-- CSS 程式碼 -->
<style>
div {
height: 120px;
width: 360px;
border: 1px solid #000;
margin: 5px 0 20px;
display: flex; /* 水平置中 */
justify-content: center; /* 水平置中 */
}
div * {
height: 50px;
margin: 0;
border: 1px solid #000;
background: #fa6;
}
.b {
width: 200px;
flex-wrap: wrap; /* 彈性項目換行 */
}
</style>
grid 排版 justify-content: center
當元素顯示類型為 grid，子元素都會轉換為網格項目，這時可以透過網格排版的方式，*justify-content 樣式屬性，將網格內的元素視爲同一組元素進行水平對齊*。
- 詳細參考：Grid 網格項目對齊、順序與重疊
- 這種方式會將子元素轉換成網格項目，因此子元素都需要用標籤包覆。
justify-self和justify-items只會讓網格內的元素水平置中對齊網格，並非全部一起水平對齊。justify-self作用於「網格項目」，justify-content和justify-items作用於「網格容器」。
下方範例會使用 grid 排版的 justify-self、justify-items 和 justify-content 樣式屬性，進行元素的水平置中以及相關差異。
<!-- HTML 程式碼 -->
justify-self: center; ( 作用於網格項目，元素水平置中各自的網格 )
<div class="a"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
justify-items: center; ( 作用於網格容器，元素水平置中各自的網格 )
<div class="b"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
justify-content: center; ( 作用於網格容器，所有元素水平置中父元素 )
<div class="c"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
justify-content: center; ( 多行，作用於網格容器，所有元素水平置中父元素 )
<div class="d"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
<!-- CSS 程式碼 -->
<style>
div {
height: 60px;
width: 450px;
border: 1px solid #000;
margin: 5px 0 20px;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 網格一列四欄 */
}
div * {
width: 100px;
height: 50px;
margin: 0;
border: 1px solid #000;
background: #fa6;
}
.a * {justify-self: center;} /* 網格項目水平置中，置中各自的網格 */
.b {justify-items: center;} /* 網格項目水平置中，置中各自的網格 */
.c {
grid-template-columns: repeat(4, 100px); /* 修改網格每一欄的寬度為 100px */
justify-content: center; /* 所有網格項目為同一組進行水平置中，置中網格容器 */
}
.d {
height: 120px;
grid-template-columns: repeat(2, 100px); /* 改成一列兩欄 */
justify-content: center; /* 所有網格項目為同一組進行水平置中，置中網格容器 */
}
</style>
同時水平垂直置中
參考「CSS 垂直置中技巧」教學內容，可以將水平置中和垂直置中的技巧整合在一起，就能實現同時水平垂直置中的效果，下方範例列出三種做法：
<!-- HTML 程式碼 -->
text-align: center; 搭配 line-height 與 vertical-align: middle;
<div class="a"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
flex 排版
<div class="b"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
grid 排版
<div class="c"><h1>Apple</h1> <h2>Banana</h2> <h3>oxxo</h3> <h4>Papaya</h4></div>
<!-- CSS 程式碼 -->
<style>
div {
height: 100px;
width: 450px;
border: 1px solid #000;
margin: 5px 0 20px;
}
div * {
width: 100px;
margin: 0;
border: 1px solid #000;
background: #fa6;
height: 50px;
}
.a {
text-align: center; /* 行內容器水平置中 */
line-height: 100px; /* 行高 100px */
}
.a * {
display: inline-block; /* 修改顯示類型 */
line-height: 50px; /* 所有內容行高 50px，但會垂直對齊最大行高 100px */
vertical-align: middle; /* 垂直置中對齊 */
}
.b {
display: flex; /* flex 排版 */
align-items: center; /* 垂直置中 */
align-content: center; /* 多行垂直置中 */
justify-content: center; /* 水平置中 */
}
.c {
display: grid; /* grid 排版 */
grid-template-columns: repeat(4, 100px); /* 一列四欄，每一欄 100px */
align-content: center; /* 垂直置中 */
justify-content: center; /* 水平置中 */
}
</style>
小結
水平置中相對垂直置中而言，是 CSS 排版裡的簡單又基本的技巧，許多選單、banner 或內容時常會應用到水平置中進行排版，透過這篇文章，對於 CSS 水平置中就能有更深一層的認識。
延伸閱讀：CSS 垂直置中技巧
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～