在 CSS 中置中

按照 5 種居中對齊技巧進行一系列測試，找出最能因應變化的技巧。

Adam Argyle

在 CSS 中設定居中位置一直是個難題，也經常成為笑話和嘲諷的對象。2020 年 CSS 已長大成人，現在我們可以誠實地笑著這些笑話，而不是咬牙切齒。

如果你偏好觀看影片，請參閱這篇文章的 YouTube 版本：

難題

有幾種不同的居中方式：從不同的用途、要對齊的物件數量等。為了說明「最佳」對齊技巧背後的理由，我製作了「韌性鈴聲」。這項工具會針對各個居中策略進行一系列的壓力測試，以便您觀察其成效。最後，我會揭露最高得分技巧，以及「最有價值」的內容。希望您能學到新的居中對齊技巧和解決方案。

韌性鈴聲

我認為，彈性響鈴代表了我的信念，即以中心對齊的策略應能應對國際版面配置、可變大小的可視區域、文字編輯和動態內容。這些原則有助於制定以下韌性測試，讓以使用者為中心的技術能夠持續運作：

  1. 壓縮：居中應可處理寬度的變更
  2. 已壓平：居中應可處理高度變更
  3. 重複：居中應根據項目數量動態調整
  4. 編輯：居中應根據內容長度和語言動態調整
  5. 流程：置中功能應不受文件方向和書寫模式影響

獲勝的解決方案應在壓縮、壓扁、複製、編輯及切換至各種語言模式和方向時，讓內容保持在中央，以展現其彈性。可靠且具備復原能力的中心，安全的中心。

圖例

我提供一些視覺色彩提示，協助您在上下文中保留一些元資料：

  • 粉紅色邊框表示擁有置中樣式的擁有權
  • 灰色方塊是容器的背景，可讓項目居中顯示
  • 每個子項都有白色背景顏色，方便您查看居中技術對子項方塊大小 (如有) 的影響

5 位參賽者

5 種重心技術進入 Resilience Ringer，只有一個會獲得 Resilience Crown 👸?。

1. 內容中心

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

display: grid 和 place-content 的簡寫方式非常精簡，很難超越。由於此方法會將子項集中並對齊，因此是針對可讀取的元素群組的穩固居中對齊技巧。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
優點
  • 即使在受限空間和溢位情況下，內容仍會置中顯示
  • 集中編輯及維護內容
  • 間距可確保 n 個子項之間的間距相同
  • 格線預設會建立資料列
缺點
  • 最寬的子項 (max-content) 會設定其餘所有子項的寬度。我們會在 Gentle Flex 中進一步討論這項功能。

適用於包含段落和標題、原型設計，或一般需要清楚顯示居中的內容的宏觀版面配置。

2. 柔軟度

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

溫和的彈性策略是「只」以中心為準的策略。這項方法的效果較為柔和，因為與 place-content: center 不同，在居中時不會變更子項的方塊大小。盡可能讓所有項目堆疊、置中且間隔均勻。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
優點
  • 只處理對齊、方向和分布
  • 編輯和維護作業都在同一個地方
  • 間距可確保 n 個子項之間的間距相同
缺點
  • 程式碼行數

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

3. Autobot

  1. Squish：非常好
  2. 壁球：很好
  3. 重複：沒問題
  4. 編輯：很好
  5. 流程：非常好

容器已設為 Flex，且沒有對齊樣式，而直接子項則採用自動邊界樣式。margin: auto 可在元素的所有邊緣運作，這點令人懷念且十分美好。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
優點
  • 有趣的訣竅
  • 快速且粗糙
缺點
  • 溢位時產生不自然的結果
  • 依賴分布而非間距，表示版面配置可能會發生子項觸碰邊緣的情況
  • 被「推」到位置似乎不是最佳做法，且可能導致子項的方塊大小發生變化

非常適合將圖示或疑似元素置中。

4. 柔軟蓬鬆中心

  1. Squish：不佳
  2. 壁球：不佳
  3. 重複：不良
  4. 編輯：太好了！
  5. 流程：太好了！(只要您使用邏輯屬性)

參賽者「鬆軟的中心」是目前聽起來最美味的參賽者，也是唯一由元素/子項擁有的居中對齊技術。請參閱我們的單獨內部粉紅邊框！

.fluffy-center {
  padding: 10ch;
}
優點
  • 保護內容
  • 核能
  • 每項測試都會秘密採用這個置中策略
  • 文字間距為空白
缺點
  • 錯誤的錯覺
  • 容器和項目之間發生衝突，因為每個項目都堅持自己的大小

適用於以字詞或字詞組為中心的對齊方式、標記、藥丸、按鈕、方塊等。

5. Pop & Plop

  1. Squish：正常
  2. 壁球：可以
  3. 重複：不良
  4. 編輯：沒問題
  5. 流程：良好

這是因為絕對定位會將元素彈出正常流程，名稱中的「plop」一詞，是因為我發現這個名稱最實用：將其放在其他內容上方。這是經典且方便的疊加圖層居中技術，可靈活且動態調整內容大小。有時您只需要將 UI 放在其他 UI 上方。

優點
  • 實用
  • 穩定可靠
  • 在需要時，它就是無價之寶
缺點
  • 含有負百分比值的程式碼
  • 需要 position: relative 才能強制包含區塊
  • 過早且突兀的換行
  • 每個包含區塊只能有 1 個，無需額外操作

適用於模態、Toast 和訊息、堆疊和深度效果、彈出式視窗。

得獎者

如果我身處孤島，只能使用 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 的微調功能非常細微，很容易被忽略，但它是我用來對齊圖片的常用技巧。它非常原子化，有時我會忘記自己正在使用它。

結論

哪些類型的內容會破壞你的居中對齊策略？還有哪些挑戰可以加入復原鈴聲？我考慮在容器上使用翻譯和自動高度切換功能，還有其他想法嗎？

既然你知道我如何做到，你會怎麼做呢？讓我們多方嘗試，瞭解在網路上建構應用程式的所有方式。請按照這篇文章的程式碼研究室指示，建立自己的居中示例，就像這篇文章中的示例一樣。推文你的版本，我會將其加入下方的社群重混專區。

社群重混作品