如何水平置中 ? | 點燈坊

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

Version

Tailwind CSS 2.1.1

text-center

使用最簡單直覺的 text-center 使 Tailwind CSS 水平置中。

<template>
  <div class="text-center">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• text-center：<div> 為 block 會佔據一整行，直接使用 text-center 讓 content 水平置中於 <div>

m-auto

w-fit

水平置中另一個直覺思維就是使用 m-auto 自動調整左右 margin 而水平置中。

但有個前提是 content 的 <div> 必須內縮與 content 同寬，m-auto 才有動態調整 margin 空間。

<template>
  <div class="w-fit m-auto">
    Tailwind CSS
  </div>
</template>

設定父層 box style：

• w-fit：width 與 content 同寬，但仍維持其 block 特性，讓 margin: auto 有操作空間
• m-auto：相當於同時設定 margin-left: auto、margin-right: auto，使之能自動調整左右 margin 而水平置中

Tailwind 並沒有內建 w-fit，此為自建 utility

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .w-fit {
    width: fit-content;
  }
}

在 index.css 自行建立 w-fit utility，其本質是 CSS 的 width: fit-content。

flex

為了讓 <div> 與 content 同寬，另一個技巧是父層 box 引入 Flexbox 使子層 item 與 content 同寬。

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

第 2 行

<div class="flex">

設定父層 box style：

• flex：為了要使 <div> 能與 conent 同寬有 margin 可操作水平置中

第 3 行

<div class="m-auto">Tailwind CSS</div>

設定子層 item style：

• m-auto：由於 <div> 與 content 同寬，因此可自動調整左右 margin 而水平置中

Flexbox

justify-between

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

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

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

設定父層 box style：

• flex： 子層 item 使用 Flexbox
• justify-between：原本為將剩餘寬度自動平分給 item 間剩餘空間，因為兩側 dummy div 沒有寬度，平分剩餘空間後 CSS 看起來像水平置中

justify-around

Tailwind CSS 水平置中，但使用 justify-around。

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

設定父層 box style：

• flex：子層 item 使用 Flexbox
• justify-around：原本與 justify-between 一樣將剩餘寬度自動平分給 item 間剩餘空間，但不同的是 justify-around 會考慮 item 的前後空間，因此平分後看起來 CSS 像水平置中

justify-evenly

CSS 水平置中，但使用 justify-evenly。

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

設定父層 box style：

• flex：層 item 使用 Flexbox
• justify-evenly：原本與 justify-between 一樣將剩餘寬度自動平分給 item 間剩餘空間，但不同的是 justify-around 會考慮 item 的前後空間，因此平分後 CSS 看起來像水平置中

justify-around 與 justify-evenly 差異是儘管包含 item 前後空間，但 justify-evenly 是真正 evenly 等寬，但 justify-around item 間空間會是前後寬度的兩倍，但目前因為只有一個子層 item，因此 justify-around 與 justify-evenly 結果相同都是水平置中

justify-center

Tailwind CSS 水平置中，但使用 justify-center 。

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

設定父層 box style：

• flex：子層 item 使用 Flexbox
• justify-center：直接將 <div> 水平置中

flex-grow

Tailwind CSS 水平置中，但在子層 item 處理。

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

需使用三個子層 item。

第 2 行

<div class="flex">

設定父層 box style：

• flex：子層 item 使用 Flexbox

第 3 行

<div class="flex-grow"/>
<div>Tailwind CSS</div>
<div class="flex-grow"/>

設定子層 empty style：

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

fixed

Tailwind CSS 水平置中，但使用 fixed 處理。

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

設定父層 box style：

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

absolute

Tailwind CSS 水平置中，但使用 absolute 處理。

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

設定父層 box style：

• w-fit：width 與 content 同寬，但仍維持其 block 特性，讓 m-auto 有操作空間
• absolute：使用 absolute position
• left-0、right-0：要使用 m-auto 水平置中，前提必須要有空間使其調整 margin，left-0 於左側邊緣緊貼 browser，right-0 於右側邊緣緊貼 browser，因此相當於架構出無形的矩形空間，只是受限於 widtd-fit 只顯示與 content 同寬部分，剩下空間可由 m-auto 自由發揮而水平置中
• m-auto：自動調整左右 margin 而水平置中

relative

Tailwind CSS 水平置中，但使用 relative 處理。

<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 左側位置，並不算水平置中
• transform：使用 transform
• -translate-x-1/2：將 item 左移本身 width 的 50%，此時才算真正水平置中

Conclusion

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