在 CSS 中置中

跟著 5 種置中技巧進行一系列測試，看看哪種技巧最能適應變化。

Adam Argyle

在 CSS 中置中是出了名的難題，充滿笑話和嘲諷。2020 年 CSS 已經成熟，現在我們可以誠實地笑著那些笑話，而不是咬牙切齒。

如果您比較喜歡看影片，可以觀看這篇貼文的 YouTube 版本：

難題

置中方式有幾種。包括不同的用途、要置中的項目數量等。為了說明「勝出」置中技術背後的原理，我建立了 Resilience Ringer。這是一系列壓力測試，可平衡每種置中策略，並觀察其成效。最後，我會揭曉得分最高的技巧，以及「最有價值」的技巧。希望您能學到新的置中技巧和解決方案。

韌性響鈴

Resilience Ringer 代表我的信念，即置中策略應能彈性因應國際版面配置、可變大小的可視區域、文字編輯和動態內容。這些原則有助於制定下列彈性測試，確保置中技術能經得起考驗：

  1. 擠壓：置中功能應能處理寬度變更
  2. Squashed：置中功能應能處理高度變更
  3. 重複：置中應根據項目數量動態調整
  4. 編輯： 置中應根據內容長度和語言動態調整
  5. Flow：置中應與文件方向和書寫模式無關

勝出的解決方案應展現其彈性，在內容被擠壓、壓縮、複製、編輯及切換至各種語言模式和方向時，仍能保持在中心位置。值得信賴且具備韌性的安全中心。

圖例

我提供了一些視覺色彩提示，協助您在情境中保留一些中繼資訊：

  • 粉紅色邊框表示置中樣式的所有權
  • 灰色方塊是容器的背景，容器會將項目置中
  • 每個子項都有白色背景顏色，因此您可以查看置中技術對子項方塊大小的任何影響 (如有)

5 位參賽者

5 種定心技巧進入韌性擂台，只有一種能獲得韌性皇冠 👸。

1. 內容中心

使用 VisBug 編輯及複製內容
  1. Squish：太好了！
  2. Squash：太好了！
  3. 重複：太棒了！
  4. 編輯：太棒了！
  5. Flow：太棒了！

display: grid 和 place-content 簡寫的簡潔性很難超越。由於它會將子項集中置中並對齊，因此對於要閱讀的元素群組來說，這是一種可靠的置中技術。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
優點
  • 即使空間受限且溢位，內容仍會置中
  • 集中編輯和維護
  • 間隔可確保 n 個子項之間的間距相等
  • 格狀版面配置預設會建立資料列
缺點
  • 最寬的子項 (max-content) 會設定其餘所有子項的寬度。我們會在「Gentle Flex」一節中進一步討論。

適合包含段落和標題的巨集版面配置、原型，或通常需要清晰置中的內容。

2. Gentle Flex

  1. Squish：太好了！
  2. Squash：太好了！
  3. 複製：太棒了！
  4. 編輯：太好了！
  5. Flow：太好了！

「溫和彈性」是更純粹的「僅限置中」策略。這種效果柔和溫和，因為與 place-content: center 不同，置中時不會變更任何子項的方塊大小。所有項目都會盡可能輕柔地堆疊、置中及排列。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
優點
  • 僅處理對齊、方向和分布
  • 集中編輯和維護
  • 間隔可確保 n 個子項之間的間距相等
缺點
  • 程式碼行數最多

適合巨觀和微觀版面配置。

3. Autobot

  1. Squish：極佳
  2. Squash：極佳
  3. 重複：罰款
  4. 編輯：太棒了
  5. Flow：極佳

容器設為 Flex，沒有對齊樣式，而直接子項則設為自動邊界樣式。margin: auto在元素的所有面上工作，有種懷舊又美妙的感覺。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
優點
  • 趣味技巧
  • 快速簡便
缺點
  • 溢位時結果不自然
  • 依賴分布而非間距，表示版面配置可能會出現子項接觸側邊的情況
  • 「推」到定位似乎不是最佳做法，而且可能會導致子項方塊大小變更

適合將圖示或虛擬元素置中。

4. Fluffy Center

  1. Squish：不佳
  2. Squash：不佳
  3. 重複：不佳
  4. 編輯：太好了！
  5. Flow：太好了！(只要使用邏輯屬性)

「fluffy center」是目前最吸引人的置中技術，也是唯一完全由元素/子項擁有的置中技術。看到我們單獨的內側粉紅色邊框了嗎？

.fluffy-center {
  padding: 10ch;
}
優點
  • 保護內容
  • 核能
  • 每項測試都暗藏這項置中策略
  • 字詞間距
缺點
  • 覺得自己沒用
  • 容器和項目之間會發生衝突，因為兩者都對大小有嚴格要求

適合以字詞或詞組為中心的置中、標記、藥丸、按鈕、方塊等。

5. Pop & Plop

  1. Squish：好
  2. Squash：好
  3. 重複：不佳
  4. 編輯：罰款
  5. 流量：正常

這會「彈出」，因為絕對定位會將元素從一般流程中彈出。名稱中的「plop」一詞，來自於我認為最實用的功能：將它放在其他東西上。這是一種經典且實用的疊加層置中技術，可根據內容大小彈性調整。有時您只需要將 UI 疊在其他 UI 上。

優點
  • 實用
  • 穩定可靠
  • 在需要時，這項功能非常實用
缺點
  • 負百分比值的程式碼
  • 需要 position: relative 才能強制建立包含區塊
  • 過早和突兀的換行
  • 每個包含區塊只能有 1 個，不需額外設定

適合：互動視窗、浮動式訊息和訊息、堆疊和深度效果、彈出式視窗。

獲勝者

如果我身在孤島，只能使用一種置中技巧，我會選擇…

[鼓聲]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

我的樣式表一律會使用這個屬性，因為它對巨集和微版面配置都很有用。這項解決方案在各方面都相當可靠，結果也符合我的預期。此外，由於我是內建大小調整功能的愛好者，因此我傾向於採用這項解決方案。雖然要輸入的內容很多，但其帶來的好處遠超過額外的程式碼。

最小可行性產品 (MVP)

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center 技巧非常細微，很容易被忽略，但這是我置中策略的主力。這項功能非常精細，有時我甚至會忘記自己正在使用。

結論

哪些因素會破壞置中策略？韌性考驗還能加入哪些挑戰？我考慮過平移和容器的自動高度切換…還有什麼！？

現在你知道我是怎麼做的了，你會怎麼做呢？讓我們多元化做法，並瞭解在網路上建構的所有方式。請按照這篇文章中的程式碼實驗室，建立自己的置中範例，就像這篇文章中的範例一樣。在 X 上分享您的版本，我會將其新增至下方的「社群混音」部分。

社群重混