使用 m-auto 實現同時水平垂直置中 | 點燈坊

若要同時水平置中與垂直置中，直覺會同時使用 justify-center 與 aligns-center，事實上也可巧妙地使用 margin: auto 實現。

Version

Tailwind CSS 2.0.3

m-auto

Item 在 box 內同時水平垂直置中。

<template>
  <div class="flex h-screen">
    <div class="w-12 h-12 my-auto ml-auto mr-2">1</div>
    <div class="w-12 h-12 my-auto mx-2">2</div>
    <div class="w-12 h-12 my-auto ml-2 mr-auto">3</div>
  </div>
</template>

• flex：使用 Flexbox
• h-screen：設定 box 的 height 為 100vh
• w-12：設定 item 的 width
• h-12：設定 item 的 width
• my-auto：設定 item 的 vertical margin 為 auto
• ml-auto：設定 item 的 left margin 為 auto
• mr-auto：設定 item 的 right margin 為 auto
• mr-2：設定 item 的 right margin
• ml-2：設定 item 的 left margin
• mx-2：設定 item 的 horizontal margin

因為 Flexbox 的 <div> width 已經佔據一列，且 h-screen 也設定 height，因此可藉由 my-auto 垂直置中，與 ml-auto 和 mr-auto 水平置中

<template>
  <div class="flex h-screen">
    <div class="item ml-auto mr-2">1</div>
    <div class="item mx-2">2</div>
    <div class="item ml-2 mr-auto">3</div>
  </div>
</template>

<style scoped>
.item {
  @apply w-12 h-12 my-auto
}
</style>

10 行

.item {
  @apply w-12 h-12 my-auto
}

若覺得各 item 所使用的 utility 都相同，可使用 @apply 抽出 item class。

Conclusion

• 之所以能夠使用 my-auto 實現 items-center，主要原因是 flex 下的 box 已經設定 height 為 h-screen，因此對於 item 而言有上下 margin，才可使用 my-auto 垂直置中，但一般 box 沒有 height 而是由 item 撐開，此時並沒有上下 margin 可言，因此 m-auto 也無濟於事

Reference

Tailwind CSS, Margin