使用 transform 同時水平垂直置中 | 點燈坊

搭配 relative 與 absolute，也能使用 transform + translate 同時水平垂直置中。

Version

Tailwind CSS 2.0.4

transform

Tailwind CSS 同時水平垂直置中。

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

第 2 行

<div class="relative h-screen">

設定父層 box style：

• relative：父層 box 使用 relative，子層 absolute 將以此層定位
• h-screen：設定 height 為整個 browser 高度

水平置中時不必設定 width，因為 block 預設就是佔據一整列，但 height 預設只是 content 高度，因此要特別設定才能垂直置中

第 3 行

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

設定子層 item style：

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

Conclusion

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

Reference

Tailwind CSS, Transform
Tailwind CSS, Translate