如何使用CSS網格中心

五種用於水平和垂直居中的CSS網格方法

>本文探討了五種CSS網格技術，用於水平和垂直方向居中。 這些方法適用於任何HTML元素。 我們還將簡要介紹Flexbox和基於轉換的中心，這些中心已在其他地方介紹。

鑰匙要點：

> CSS網格提供了五種有效的方法來集中A Div：，

，
• ，自動利潤和網格區域。 place-selfplace-items中心單個網格項目，使其他項目可以自由定位。它結合了place-content（水平）和
（垂直）。
• >place-self>適用於網格容器，當所有項目需要相同的放置時，理想。 這是justify-self和align-self>的速記。
>
• place-items>將整個網格容器的內容對齊，將所有項目視為單個組。它結合了justify-items和align-items>。
>
• 自動邊緣讓瀏覽器計算和分發周圍空間，以其網格單元格內的div為中心。 place-content justify-content align-content
設置：

我們將從容器和簡單的框元素（DIV）開始進行演示。 這是html：

和初始CSS：

<article>
  <div></div>
</article>

所有示例都使用

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

，將

元素作為網格容器建立。 該容器被製成寬且高的容器以提供足夠的空間。

居中方法： display: grid article

：這很容易將網格項目集中在其單元格中。

1. [codepen演示：使用網格和位置自我居中]（鏈接到codepen）place-self
是

和

article {
  display: grid;
}

div {
  place-self: center;
}

登入後複製

：place-self這將其中心的所有網格項目集中在其細胞中。 justify-self align-self

[codepen演示：帶有CSS網格和地點項目的元素]（鏈接到Codepen）
2. place-items是和>

article {
  display: grid;
  place-items: center;
}

3. <> place-content：這將整個網格內容作為組中心。

<article>
  <div></div>
</article>

[codepen演示：帶有CSS網格和位置含量的元素]（鏈接到codepen）

place-content是justify-content和align-content和space-around的值作為space-evenly>的替代方案。 center>

4. >自動利潤：這使用自動保證金計算。

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

[codepen演示：帶有CSS網格和自動利潤的元素]（鏈接到codepen）

這種簡單的技術使瀏覽器可以處理間距。 >

網格區域：
5. 此方法使用多行/列網格進行精確放置。 >

[codepen演示：帶有CSS網格的中心A DIV]（鏈接到Codepen）

article {
  display: grid;
}

div {
  place-self: center;
}

或者，使用命名的網格區域：

[Codepen演示：使用命名區域的CSS網格中心A DIV]

article {
  display: grid;
  place-items: center;
}

結論：

所有方法有效地居中。對於直接元素定位，

>和自動邊距很方便。 選擇最適合您的佈局複雜性和需求的方法。 請記住，這些技術在除divs以外的元素上起作用。 這些示例使用一個空的div，但添加內容維護中心。 >

（FAQS部分在很大程度上重複了，並且該問題答案已經在文章中隱含地介紹了。）

以上是如何使用CSS網格中心的詳細內容。更多資訊請關注PHP中文網其他相關文章！