使用 transform 水平置中 | 點燈坊

搭配 relative 與 absolute，也能使用 transform + translate-x 水平置中。

Version

Tailwind CSS 2.0.3

trasnform

Tailwind CSS 水平置中。

<template>
  <div class="relative">
    <div class="absolute left-1/2 transform -translate-x-1/2">
      Tailwind CSS
    </div>
  </div>
</template>

第 2 行

<div class="relative">

設定父層 box style：

• relative：父層 box 使用 relative position，子層 absolute 將以此層定位

第 3 行

<div class="absolute left-1/2 transform -translate-x-1/2">

設定子層 item style：

• absolute：子層 item 使用 absolute position
• left-1/2：left 座標為 50%，此為 item 左側位置，並不算水平置中
• -translate-x-1/2：將 item 左移本身 width 的 50%，此時才算真正水平置中

Conclusion

• 實務上會使用 before 或 after 新增一層 layer 為 absolute position，再透過 transform 與 -translate-x-1/2 對父層的 relative position 水平置中

Reference

Tailwind CSS, Transform
Tailwind CSS, Translate