水平置中技巧

这篇教学会介绍多种 CSS“水平置中”的实用技巧，运用对齐、margin 以及 Flex 弹性排版、Grid 网格排版等方式，将元素套用水平置中的效果，最后还会示范同时垂直水平置中的做法。

延伸阅读：CSS 垂直置中技巧

快速导览：

• 水平置中技巧列表
  • 文字对齐 text-align: 0 center
  • 外边界 margin: 0 auto
  • flex 排版 justify-content: center
  • grid 排版 justify-content: center
• 同时水平垂直置中

水平置中技巧列表

水平置中通常只需要依靠 CSS 所提供的水平置中功能以及基本原理，就能实现水平置中效果，这些做法较为弹性且符合大多数情境，是较为推荐的方法，由于水平置中相对垂直置中而言相当简单，因此不建议使用其他类似定位的方式进行水平置中，避免修改版面时还要进行额外的设定或调整。

文字对齐 text-align:center

文字对齐 text-align 是最常见的水平置中技巧，主要是让文字进行靠左、靠右或水平置中，运用这个样式属性就能让元素水平置中，使用时需注意下列事项：

• 详细参考：text-align 水平对齐
• text-align 具有继承特性，会影响子元素以及其内容。
• text-align 只影响 inline-* 相关显示类型的元素，如果要作用于区块容器，必须要将区块容器改成 inline-block。

下方范例会使用三组 div 呈现 line-height 垂直置中的不同，三组 div 中不同元素的行高都不同，但如果都是行内容器，会采用同层级的最大行高，如果是区块容器，区块容器的高度就会随行高发生变化。

线上展示：https://codepen.io/oxxo/pen/ByaBxmL

<!-- 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 )。

线上展示：https://codepen.io/oxxo/pen/pvozVdd

<!-- 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 进行“单行”与“多行”元素的垂直置中。

线上展示：https://codepen.io/oxxo/pen/qEBWYVv

<!-- 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 样式属性，进行元素的水平置中以及相关差异。

线上展示：https://codepen.io/oxxo/pen/PwoYeEN

<!-- 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 垂直置中技巧”教学内容，可以将水平置中和垂直置中的技巧整合在一起，就能实现同时水平垂直置中的效果，下方范例列出三种做法：

线上展示：https://codepen.io/oxxo/pen/KwKPRZX

<!-- 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 垂直置中技巧

意见反馈