次世代 Hugo

無駄を削ぎ、本質を研ぐ

使用 align-content center 垂直置中

Sam Xiao's Avatar 2021-03-03

除了能使用 align-items: center 垂直置中外，事實上也能使用 flex-wrap: wrap 搭配 align-content: center 垂直置中。

Version

CSS 3

Flexbox

center000

只使用 Flexbox 時，子層 item 會自動 stretch 成父層 box height。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  display: flex;
  height: 100px;
}
</style>

第 8 行

.box {
  display: flex;
  height: 100px;
}

設定父層 box 的 style：

  • display: flex：子層 item 使用 Flexbox 排列
  • height: 100px：設定父層 box height

align-items: stretch 為 Flexbox 預設 property，因為子層 item 沒有設定 height，會自動 stretch 成父層 box height

align-items: center

center001

改用 align-items: center 後會垂直置中於 box height。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  display: flex;
  align-items: center;
  height: 100px;
}
</style>

第 8 行

.box {
  display: flex;
  align-items: center;
  height: 100px;
}

設定父層 box 的 style：

  • align-items: center：從預設 align-items: stretch 改成 align-items: center 之後，item 高度會內縮成只與 content 同高，而父層 box 又有設定 height，此時 flex line 會與父層 box 同高，因此 align-items: center 會垂直置中

這也是垂直置中最標準寫法

align-content: center

center002

將 align-items: center 改成 align-content: center 後，會發現不再垂直置中。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  display: flex;
  align-content: center;
  height: 100px;
}
</style>

第 8 行

.box {
  display: flex;
  align-content: center;
  height: 100px;
}

設定父層 box 的 style：

  • align-content: center：由於沒設定 align-items，因此又回到預設值 align-items: stretch，子層 item height 自動 stretch 成父層 box height，此時 flex line 也被撐開與父層 box 同高，雖然有 align-content: center 但看不出來

flex-wrap: wrap

center003

align-content: center 加上 flex-wrap: wrap 後就可垂直置中。

<template>
  <div class="box">
    CSS
  </div>
</template>

<style scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100px;
}
</style>

第 8 行

.box {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100px;
}

設定父層 box 的 style：

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

Conclusion

  • 若只有 align-content: center，此時受 align-items: stretch 影響會自動 stretch 與父層 box 同高，此時 flex line 也被撐開與父層 box 同高，因此 align-content: center 沒有任何效果
  • 若 align-content: center 搭配 flex-wrap: wrap 時，由於啟動換列機制抑制 align-items: stretch，子層 item 僅與 content 同高，連帶影響 flex line 高度也與子層 item 同高，因此 align-content: center 可發揮作用讓 flex line 垂直置中於父層 box

Reference

MDN, align-content

# CSS