如何垂直置中 ? | 點燈坊

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

Version

Tailwind CSS 2.1.1

m-auto

Tailwind CSS 垂直置中，在子層 item 使用 m-auto 處理。

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

第 2 行

<div class="h-screen flex">

設定父層 box style：

• h-screen：要設定垂直置中，因此要設定父層 box 高度
• flex：使用 flex 令子層 item 根據 content 內縮

第 3 行

<div class="my-auto">

設定子層 item style：

• my-auto：因為父層 box 有設定高度，因此子層 item 可自動調整上下 margin 而垂直置中

Flexbox

justify-between

Flexbox 亦有多種方式可垂直置中，先討論從父層 box 處理。

<template>
  <div class="flex flex-col justify-between h-screen">
    <div/>
    <div>Tailwind CSS</div>
    <div/>
  </div>
</template>

子層使用 3 個 item，兩旁為 dummy div。

設定父層 box style：

• flex：子層 item 使用 Flexbox 排列

• flex-col：設定 main axis 為 column

• justify-between：原本為將剩餘高度自動平分給 item 間剩餘空間，因為兩側 dummy div 沒有高度，平分剩餘空間後 CSS 看起來像垂直置中

• h-screen： 設定 box 高度

justify-around

Tailwind CSS 垂直置中，改用 justify-around 實現。

<template>
  <div class="flex flex-col justify-around h-screen">
    Tailwind CSS
  </div>
</template>

設定父層 box 的 style：

• flex：子層 item 使用 Flexbox 排列
• flex-col：設定 main axis 為 column
• justify-around：原本與 justify-between 一樣將剩餘高度自動平分給 item 間剩餘空間，但不同的是 justify-around 會考慮 item 的上下空間，因此平分後看起來 Tailwind CSS 像垂直置中
• h-screen：設定 box 高度

justify-evenly

Tailwind CSS 垂直置中，改用 justify-evenly 實現。

<template>
  <div class="flex flex-col justify-evenly h-screen">
    Tailwind CSS
  </div>
</template>

設定父層 box 的 style：

• flex：子層 item 使用 Flexbox 排列
• flex-col：設定 main axis 為 column
• justify-evenly：原本與 justify-between 一樣將剩餘高度自動平分給 item 間剩餘空間，但不同的是 justify-around 會考慮 item 的上下空間，因此平分後 Tailwind CSS 看起來像垂直置中
• h-screen：設定 box 高度

justify-around 與 justify-evenly 差異是儘管包含 item 上下空間，但 justify-evenly 是真正 evenly 等高，但 justify-around item 間空間會是前後高度的兩倍

justify-center

Tailwind CSS 垂直置中，改用 justify-center 實現。

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

設定父層 box 的 style：

• flex：子層 item 使用 Flexbox 排列
• flex-col：設定 main axis 為 column
• justify-center：直接將子層 item 垂直置中
• h-screen：設定 box 高度

items-center

Tailwind CSS 垂直置中，改用 items-center 實現。

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

設定父層 box 的 style：

• flex：子層 item 使用 Flexbox 排列
• items-center：由於沒更改 flex-direction，因此目前 main axis 仍是 row，可使用 items-center 直接置中於 cross axis，相當於垂直置中
• h-screen：設定 box 高度

content-center

Tailwind CSS 垂直置中，改用 content-center 實現。

<template>
  <div class="flex flex-wrap content-center h-screen">
    Tailwind CSS
  </div>
</template>

設定父層 box 的 style：

• flex：子層 item 使用 Flexbox 排列
• flex-wrap：啟動換列機制，會抑制 items-stretch 預設 stretch 整個父層 box 高度，僅收縮成與 content 同高，因此 flex line 也收縮不再與父層 box 同高
• content-center：因為 flex line 不再與父層 box 同高，因此 content-center 才有機會以 flex line 對父層 box 垂直置中
• h-screen：設定 box 高度

flex-grow

Tailwind CSS 垂直置中，但在子層 item 處理。

<template>
  <div class="flex flex-col h-screen">
    <div class="flex-grow"/>
    <div>Tailwind CSS</div>
    <div class="flex-grow"/>
  </div>
</template>

需使用三個子層 item。

第 2 行

<div class="flex flex-col h-screen">

設定父層 box 的 style：

• display: flex：子層 item 使用 Flexbox 排列
• flex-direction: column：設定 main axis 為 column
• h-screen：設定 box 高度

第 3 行

<div class="flex-grow"/>

• flex-grow：表示空白部分剩餘 height 將由此 <div> 平分，因此看起來為垂直置中

fixed

Tailwind CSS 垂直置中，但使用 fixed 處理。

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

設定父層 box style：

• h-fit：height 與 content 同高，但仍維持其 block 特性，讓 m-auto 有操作空間
• fixed：使用 fixed position
• top-0、bottom-0：要使用 m-auto 垂直置中，前提必須要有空間使其調整 margin，top-0 於上側邊緣緊貼 browser，bottom-0 於下側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 h-fit 只顯示與 content 同高部分，剩下空間可由 m-auto 自由發揮而垂直置中
• m-auto：自動調整上下 margin 而垂直置中

absolute

Tailwind CSS 垂直置中，但使用 absolute 處理。

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

設定父層 box style：

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

relative

Tailwind CSS 垂直置中，但使用 relative 處理。

<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/2：top 座標為 50%，此為 item 上側位置，並不算垂直置中
• transform：使用 transform
• -translate-y-1/2：將 item 上移本身 height 的 50%，此時才算真正垂直置中

Conclusion

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