在 CSS 中置中

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

Adam Argyle

將 CSS 納入遊戲中心是相當惡名昭彰的挑戰，還可能會開玩笑話和模擬畫面。2020 年 CSS 供應商不斷成長 磨牙。

如果您喜歡看影片，請參考這篇文章的 YouTube 版本：

難題

置中有多種類型。在各種用途上 為了示範成功關鍵置中技術 創立了韌性環這是一系列的壓力測試 策略和成效，觀察它們的成效。 最後，我會介紹最高的評分技巧，以及「最有價值的」技能。 希望您成功掌握了全新的中心技術與解決方案。

響應韌性環

「韌性環」代表我相信 策略應靈活應對國際版面配置、可變大小的可視區域、文字編輯和動態調整 內容。根據這些原則， 以終極技術為中心：

  1. 搶得先機： 置中應能處理寬度變化
  2. 壓縮： 置中應能處理高度變化
  3. 重複： 置中設定應根據項目數量動態調整
  4. 編輯： 置中，應以內容長度和語言動態調整
  5. 流程： Centering 應採用無文件方向和書寫模式

眾所周知的解決方案應保留 擠壓、擠壓、複製、編輯和交換 支援多種語言模式和方向值得信賴的安全中心，值得信賴。

圖例

我可以提供一些視覺色彩提示，協助你保留一些中繼資訊 內容：

  • 粉紅色邊框表示中心樣式的擁有權
  • 灰色方塊是容器的背景，利用這個功能尋找容器 項目
  • 每個孩子都有白色底色，所以您可以看到 置中技術會將子箱大小 (如果有)

5 名參賽者

5 個中央技術進入韌性環，但只有一種技術會接收 抗韌的皇冠 👸?。

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. 柔和 Flex

  1. 烏賊：太好了！
  2. 壁球：太好了！
  3. 重複：太好了！
  4. 編輯：太好了！
  5. 流動：太好了！

Gentle 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 本身極具震撼力，可以做為中心點 很容易忽略 但這會是我中心策略的核心原來是非常原子 忘記我正在使用了。

結論

哪些類型的內容打破主要策略？其他難題 是否可以加入彈性鈴聲？我考慮了翻譯 容器上的自動高度切換...還有什麼！？

現在你知道該怎麼做了，你會怎麼做？！來擴充我們的做法 瞭解建立網路平台的所有方式請按照程式碼研究室本文章的說明操作， 建立您自己的中心範例 就像本文中的範例一樣推文 我的版本，然後將它加入 下方的社群重混作品專區。

社群重混作品