使用 items-center 在 Cross Axis 置中 | 點燈坊

實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度，若也需同時對 Cross Axis 置中時，可使用 items-center 達成。

Version

Tailwind CSS 2.0.2

items-center

Item 有設定高度各不相同，但各 item 在 cross axis 置中。

<template>
  <div class="flex items-center w-11/12 h-96">
    <div class="w-20 h-12 m-2">1</div>
    <div class="w-20 h-8 m-2">2</div>
    <div class="w-20 h-14 m-2">3</div>
  </div>
</template>

• flex：使用 Flexbox
• items-center：表示 item 置中於 cross axis，因為目前 main axis 為 row，相當於垂直置中
• h-96：使用 items-center 時外層須設定 height
• h-12、h-8、h-14：item 有設定 height 且其值都不同

items-center 本質是 CSS 的 align-items: center。

Conclusion

• 只要記住 justify- 系列是根據 main axis 對齊；而 items- 系列是根據 cross axis 對齊即可

Reference

Tailwind CSS, items-center