在 CSS 中置中

請運用 5 項中央技巧進行一系列測試,看看哪一項最能彈性改變。

在 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. 流動:太好了!

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

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

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

2. 柔和 Flex

  1. 烏賊:太好了!
  2. 壁球:太好了!
  3. 複製:太好了!
  4. 編輯:太好了!
  5. 流程:太好了!

溫和的彈性策略是「只」以中心為準的策略。這項操作方式溫和輕柔,因為與 place-content: center 不同,在對齊期間,不會變更任何子項的方塊大小。盡可能讓所有項目堆疊、置中且間隔均勻。

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

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

3. 自動機器人

  1. 烏賊:很棒
  2. 壁球:很好
  3. 重複:沒問題
  4. 編輯:很好
  5. 流程:非常好

容器已設為 Flex,且沒有對齊樣式,而直接子項則採用自動邊界樣式。對於 margin: auto 處理元素的所有面來說,有一點懷舊也很好奇。

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
優點
  • 有趣的訣竅
  • 迅速髒亂
缺點
  • 溢位時產生不自然的結果
  • 仰賴發布而非間隔,意味著版面配置可能會在子項觸控側邊發生版面配置
  • 將子項「推送」至位置似乎不是最佳做法,且可能導致子項的方塊大小發生變化

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

4. 毛茸茸星中心

  1. 靜音:
  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 的微調功能非常細微,很容易被忽略,但它是我用來對齊圖片的常用技巧。它非常原子化,有時我會忘記自己正在使用它。

結論

哪些類型的內容打破主要策略?還有哪些挑戰可以加入復原鈴聲?我考慮在容器上使用翻譯和自動高度切換功能,還有其他想法嗎?

既然你知道我如何做到,你會怎麼做呢?讓我們多方嘗試,瞭解在網路上建構應用程式的所有方式。與本文有關的程式碼研究室,建立自己的中心範例,就像本文中的範例。推文你的版本,我會將其加入下方的社群重混專區。

社群重混作品