點燈坊

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

如何同時水平垂直置中 ?

Sam Xiao's Avatar 2021-04-05

水平垂直置中為實務上常見需求，Tailwind CSS 可由多種方式實現。

Version

Tailwind CSS 2.0.3

m-auto

center001

Tailwind CSS 同時水平置中與垂直置中，由子層 item 以 m-auto 處理。

<template>
  <div class="flex h-screen">
    <div class="m-auto">
      Tailwind CSS
    </div>
  </div>
</template>

第 2 行

<div class="h-screen flex">

設定父層 box style：

  • flex：父層仍使用 Flexbox，但不使用 justify-center 與 align-center，目的使子層 item 的 width 能內縮與 content 同寬，如此 m-auto 才能自動調整 margin 而水平垂直置中
  • h-screen：父層設定 height 才能垂直置中

第 3 行

<div class="m-auto">

設定子層 item style：

  • m-auto：子層直接使用 m-auto 自動調整上下左右 margin 達成水平垂直置中

Flexbox

center000

Tailwind CSS 同時水平置中與垂直置中，由父層 box 處理。

<template>
  <div class="h-screen flex justify-center items-center">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

  • h-screen：高度為整個 browser 高度，外層 box 本來就會撐滿寬度不是問題，但必須指定高度才能垂直置中
  • flex：子層 item 使用 Flexbox 排列
  • justify-center：使子層 item 在 main axis 水平置中
  • align-center：使子層 item 在 cross axis 垂直置中

fixed

center002

Tailwind CSS 同時水平置中與垂直置中，改在父層 box 使用 fixed 處理。

<template>
  <div class="w-fit h-fit fixed top-0 bottom-0 left-0 right-0 m-auto">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

  • w-fit：width 與 content 同寬，但仍維持其 block 特性，讓 m-auto 有操作空間
  • h-fit：height 與 content 同高，但仍維持其 block 特性，讓 m-auto 有操作空間
  • fixed：使用 fixed position
  • top-0、bottom-0、left: 0、right: 0：要使用 m-auto 水平垂直置中，前提必須要有空間使其調整 margin，當 top、bottom、left 與 top 都設定為 0 時，相當於架構出無形的矩形空間，只是受限於 w-fit 與 h-fit 只顯示與 content 同寬高部分，剩下空間可由 m-auto 自由發揮而水平垂直置中
  • m-auto：自動調整上下左右 margin 而水平垂直置中

absolute

center003

Tailwind CSS 同時水平置中與垂直置中，改在父層 box 使用 absolute 處理。

<template>
  <div class="w-fit h-fit absolute top-0 bottom-0 left-0 right-0 m-auto">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

  • w-fit：width 與 content 同寬，但仍維持其 block 特性，讓 m-auto 有操作空間
  • h-fit：height 與 content 同高，但仍維持其 block 特性，讓 m-auto 有操作空間
  • absolute：使用 absolute position，因為其父層皆沒設定定位，相當於定位在 window
  • top-0、bottom-0、left-0、right-0：要使用 m-auto 水平垂直置中，前提必須要有空間使其調整 margin，當 top、bottom、left 與 top 都設定為 0 時，相當於架構出無形的矩形空間，只是受限於 w-fit 與 h-fit 只顯示與 content 同寬高部分，剩下空間可由 m-auto 自由發揮而水平垂直置中
  • m-auto：自動調整上下左右 margin 而水平垂直置中

transform

center000

Tailwind CSS 同時水平置中與垂直置中，改在子層 item 使用 transform 處理。

第 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

  • CSS 擁有多種方式水平垂直置中：Flexbox、m-auto、 fixed 、 absolute 與 transform，可視實際需求靈活運用

Reference

Tailwind CSS, justify-center
Tailwind CSS, items-center
Tailwind CSS, m-auto
Tailwind CSS, fixed
Tailwind CSS, absolute
Tailwind CSS, Transform
Tailwind CSS, Translate

# TailwindCSS