使用 Margin Auto 水平置中 | 點燈坊

水平置中直覺會使用 Flexbox Layout 的 justify-content: center，事實上也可使用 Flow Layout 的 margin: auto 更精簡。

Version

CSS 3

margin-left: auto

紅色正方形水平置中。

<template>
  <div class="square"/>
</template>

<style>
.square {
  width: 100px;
  height: 100px;
  background: #f00;
  margin-left: auto;
  margin-right: auto;
}
</style>

• 將 margin-left 與 margin-right 設定為 auto，表示 <div> 的左右 margin 將自動調整，因此 <div> 能水平置中。

margin: auto

紅色正方形水平置中。

<template>
  <div class="square"/>
</template>

<style>
.square {
  width: 100px;
  height: 100px;
  background: #f00;
  margin: auto;
}
</style>

第 6 行

.box {
  width: 100px;
  height: 100px;
  background: #f00;
  margin: auto;
}

可簡單寫成 margin: auto 即可水平置中。

因為 margin: auto 相當於

• margin-top: auto
• margin-bottom: auto
• margin-left: auto
• margin-right: auto

但因為目前 <div> 只占據一列，本身就沒有 margin-top 與 margin-bottom，因此設定 auto 也無效，所以 margin: auto 相當於 margin-left: auto 與 margin-right: auto。

Conclusion

• margin: auto 與 Flexbox 都能水平置中，唯 Flexbox 是從父層處理，故須在外層多加一層 <div>；而 margin: auto 是從子層處理，故可直接針對 element 設定

Reference

MDN, margin