在 CSS 中置中

請運用 5 項中心技巧，進行一系列測試，瞭解何者最能有效扭轉局勢。

亞當.阿吉爾 (Adam Argyle)

「成為 CSS 中心」是很惡名昭彰的挑戰，充滿笑話和嘲諷性質。2020 年 CSS 供應商不斷擴張，現在我們能真實笑口常開講

如果你偏好使用影片，也可以觀看這篇 YouTube 文章：

難題

置中的方式有很多種。從各種用途、要中心的東西數量等 我設計出「強而有力」的中心技術背後的理由此為一系列壓力測試，用於每項集中策略在內部平衡和觀察效能。最後，我公布了分數最高的技巧，以及一個「最有價值」。 希望這些課程能逐步介紹全新的中心技術和解決方案。

韌性圓環

彈性鈴響代表我相信一個置中策略應可適應國際版面配置、大小可變的可視區域、文字編輯和動態內容。這些原則有助於塑造以下旨在維持核心技術的韌性測試：

  1. Squished：置中應能處理寬度的變更
  2. 壓縮：置中應能處理高度的變更
  3. 重複：置中應動態至項目數量
  4. 編輯：將頁面置中應動態轉換為內容的長度和語言
  5. 流程：置中應在文件方向和撰寫模式各不相同

勝出的解決方案應將內容保持置中，同時展現其韌性，同時進行擠壓、擠壓、複製、編輯，以及切換至各種語言模式和方向。兼具可靠性與彈性的安全中心。

圖例

我們提供一些視覺顏色提示，協助您在內容中保留一些中繼資訊：

  • 粉紅色邊框代表擁有中心樣式的擁有權
  • 灰色方塊是容器中的背景，用於保持置中項目
  • 每個子項都有白色的背景顏色，因此你可以查看聚焦技術對子方塊大小 (如有) 的所有影響

5 大參賽者

這 5 項集中技術進入 Resilience Ringer，只有一位會獲得韌性王冠 👸?。

1. 內容中心

使用 VisBug 編輯及複製內容
  1. 擠壓：太棒了！
  2. 壁球：太棒了！
  3. 重複：太好了！
  4. 編輯：太棒了！
  5. 流程：太棒了！

想比 display: grid 和 place-content 簡寫還困難重重。這個元件會集中子項並合理化，因此是一項可靠的技術，適合用來為需要閱讀的元素群組進行分類。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
優點
  • 即使在空間有限和溢位底下仍將內容置中
  • 集中管理編輯及維護畫面
  • 缺口保證第 n 個子項之間的間距相等
  • 根據預設，格線建立資料列
缺點
  • 最寬的子項 (max-content) 會設定其餘元件的寬度。這將在 Gentle Flex 中進一步討論。

適用於含有段落和標題、原型，或一般需要清楚置中項目的巨集版面配置。

2. 柔和彈性

  1. 擠壓：太棒了！
  2. 壁球：太棒了！
  3. 重複：太好了！
  4. 編輯：太好了！
  5. 流程：太棒了！

Getle Flex 僅在「只」採用「中心」策略。這是柔和的柔和設計，因為與 place-content: center 不同，系統不會在畫面中心變更子項的包裝盒尺寸。盡可能輕輕地對所有項目進行堆疊、置中及間隔。

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
優點
  • 僅處理對齊、方向和分佈
  • 集中管理及維護
  • 缺口保證第 n 個子項之間的間距相等
缺點
  • 大部分的程式碼

適用於巨集和微版面配置。

3. 自動機器人

  1. 擠壓：很好
  2. 壁球：極佳
  3. 重複：沒問題
  4. 編輯：佳
  5. 流程：佳

容器會設定為彈性無對齊樣式，而直接子項則是採用自動邊界樣式。元素的所有層面，margin: auto有一定的懷舊魅力。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
優點
  • 趣味技巧
  • 骯髒或髒汙
缺點
  • 溢出時的結果
  • 須依賴分佈情形 (而非間隔)，表示版面配置可在兒童觸控邊執行
  • 無法以最佳方式「推送至」位置，而且可能會改變子項的包裝盒大小

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

4. 毛毛中心

  1. 擠壓：不佳
  2. 迴力球：不佳
  3. 重複：不佳
  4. 編輯：太好了！
  5. 流程：太棒了！(只要使用邏輯屬性)

到目前為止，參賽者「毛茸茸中心」是我們最厲害的一對手，也是唯一由元素/孩子擁有的唯一主角技術。看看我們獨自的粉紅色邊框！？

.fluffy-center {
  padding: 10ch;
}
優點
  • 保護內容
  • 核能
  • 每項測試都暗藏此中心策略
  • 文字空間有間隔
缺點
  • 不實用的插圖
  • 容器與項目之間存在衝突，因為 每個項目在大小方面

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

5. 流行樂與流行樂

  1. 擠壓：沒問題
  2. 壁球：尚可
  3. 重複：不佳
  4. 編輯：精細
  5. 流程：正常

之所以會出現「彈出」訊息，是因為絕對定位會將元素退出正常流程。我覺得最有用的地方，就是名稱的「額外」部分： 以其他方式蓋住名稱這是一種經典且便利的重疊中心技術 不僅具備彈性，而且能動態調整內容大小有時您只需要將 UI 嵌入其他 UI 之上。

優點
  • 實用
  • 穩定可靠
  • 在您需要的時候
缺點
  • 含有負值百分比值的程式碼
  • 需要 position: relative 強制包含區塊
  • 早期和尷尬的換行
  • 每個包含區塊只能有 1 個，不需採取額外行動

適用於強制回應、浮動式訊息、訊息、堆疊和深度特效、彈出式視窗。

得獎者

如果我在一座島上，只能有 1 種置中技巧，那會...

[鼓聲]

Gentle Flex 🎉?

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

您隨時可以在樣式表中找到它，因為這對巨集和微版面配置來說都很實用。這個解決方案提供全方位可靠的解決方案，其結果符合我的期望。此外，由於我是內建大大小小的垃圾，因此傾向採用這項解決方案。沒錯，您輸入的內容必須繁瑣，但它的優點卻比其他程式碼來得高。

最小可行性產品 (MVP)

毛毛中心

.fluffy-center {
  padding: 2ch;
}

「Fluffy Center」的體型夠小，因此很容易被忽略，但這是我著重策略的主要關鍵。這個概念很原子 有時我就忘記使用

結語

哪些類型的事情可能影響了您制定核心策略？彈性鈴響還可加入哪些挑戰？我考慮使用平移功能 以及容器上的自動高度開關...還有什麼呢？

現在你知道我怎麼做，你會怎麼做？讓我們將做法多樣化 並學習運用網路打造服務的所有方式請按照這篇文章的程式碼研究室，自行建立中心範例，就像本文中的範例一樣。請透過 Tweet 訊息，告訴我們您的版本，我將它新增到下方的「社群重混」部分。

社群重混作品