點燈坊

失くすものさえない今が強くなるチャンスよ

使用 transform 垂直置中

Sam Xiao's Avatar 2021-04-04

搭配 relativeabsolute,也能使用 transform + translate-y 垂直置中。

Version

Tailwind CSS 2.0.3

transform

center000

Tailwind CSS 垂直置中。

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

第 2 行

<div class="relative h-screen">

設定父層 box style:

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

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

第 3 行

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

設定子層 item style:

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

Conclusion

  • 實務上會使用 beforeafter 新增一層 layer 為 absolute position,再透過 transform-translate-x-1/2 對父層的 relative position 垂直置中

Reference

Tailwind CSS, Transform
Tailwind CSS, Translate