本文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有刪改
在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用於任何類型的元素。
初始化
我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML：
<article>
<div></div>
</article>下面是我們的初始CSS：
article {
width: 100%;
min-height: 100vh;
background: black;
display: grid;
}
div {
width: 200px;
background: yellow;
height: 100px;
}
在下面所有的例子中，我們將使用display: grid屬性。這將<article>元素建立為網格容器，併為該容器生成塊級網格。我們已經將網格容器設置為寬（width: 100%）和高（min-height: 100vw），這樣我們的div就有足夠的空間在其中移動。
接下來讓我們來看看將div居中的各種方法。
1.使用 CSS Grid 和 place-self 將Div居中
place-self屬性提供了一種簡單的方法來水平和垂直居中網格項。它用於將網格項置於其網格單元格的中心。
將div居中就像這樣簡單：
article {
display: grid;
}
div {
place-self: center;
}
place-self屬性是justify-self（水平）和align-self（垂直）屬性的簡寫。
使用place-self對於在網格內居中單個項目特別有用，因為它使其他網格項目可以自由地以不同的方式定位。但這並不是使用Grid使元素居中的唯一方法，繼續看看其他的一些方法。
2.使用 CSS Grid 和 place-items 居中Div
place-items屬性是justify-items（水平）和align-items（垂直）的簡寫。這些屬性應用於網格容器而不是每個網格項，當我們希望所有網格項具有相同的位置時，這些屬性非常有用。
將以下CSS代碼添加到父容器：
article {
display: grid;
place-items: center;
}
我們可以基於初始代碼添加更多的div元素，看看會發生什麼。結果是每個div將在其網格單元格內水平和垂直居中，如下圖所示（通過瀏覽器的網格檢查器）。
3.使用 place-content 居中Div
place-content屬性是justify-content（水平）和align-content（垂直）的簡寫。雖然place-self和place-items控制網格項如何放置在其指定的網格單元格中，但place-content指定網格容器的整個內容應如何對齊（即，所有網格項被視為一個組）。在我們的演示中，只有一個網格項（我們的單個黃色div），因此我們也可以使用place-content將其置於其容器的中心。
將以下CSS代碼添加到父容器：
article {
display: grid;
place-content: center;
}
這裏有幾點需要注意。到目前為止，在所有的例子中我們都使用了center的值。但是到目前為止，我們已經探索的每個屬性都有各種其他的放置物品的值。place-content有很多值，另外兩個值也可以用於居中我們的div：space-around和space-evenly。
此外，在我們的簡單例子中，一個div在容器中居中，我們甚至可以混合和匹配我們上面看到的屬性。我們可以使用justify-content和align-items來居中div，有興趣的可以嘗試看看。
4.使用 CSS Grid 和 Auto Margins 居中
像往常一樣，我們將使用display: grid來定位父容器。我們還將使用margin: auto為div指定自動邊距。這使瀏覽器自動計算div周圍的可用空間，並在其網格單元格內垂直和水平劃分，將div放置在中間：
article {
display: grid;
}
div {
margin: auto;
}
5.使用 CSS Grid 網格區域居中div
最後一個方法我們將深入探討Grid佈局的強大功能，因為我們將研究兩種方法來將div居中放置在具有多行和多列的網格中。
以下是我們的基本CSS：
article {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 1fr 100px 1fr;
}
div {
background: yellow;
grid-column: 2;
grid-row: 2;
}我們顯式地佈局了一個網格，中間有一個區域來放置我們的div。我們現在甚至不需要在div上設置尺寸，因為網格軌跡會處理這個問題。我們在網格的中間指定一個網格單元格，其寬度為200px，高度為100px，然後我們告訴div從第二條網格線和第二條行線開始。(默認情況下，它將僅跨到每個方向上的下一條軸網線。）div元素被很好地放置在其容器的中心，如下所示。
下圖顯示了位於其網格軌跡內的div。
網格佈局提供了各種不同的方法來實現這一結果。最後我們做與上面相同的事情，但這次為我們的div使用一個命名區域：
article {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: 1fr 100px 1fr;
grid-template-areas: ". . ."
". box ."
". . .";
}
div {
background: yellow;
grid-area: box;
}在這裏，我們設置一個名為grid-area的box，然後描述它應該位於網格上的什麼位置，用一個簡單的點（.）指定哪些網格單元格是空的。
這種佈局方法的優點是，它可以很容易地將許多其他元素放置在我們想要的任何地方，這就是網格佈局的強大之處。
結論
這些方法中的每一個都允許我們在容器中水平和垂直地居中一個div。place-self和margin: auto選項很好，因為它們直接應用於居中的元素，而不是其容器。但是本文中介紹的所有方法都是高效的，並且可以很好地完成這項工作。在各種場景中，我們可能希望將元素置於中心，因此擁有一系列工具來實現該目標非常重要。
在演示示例中，我們只是使用了一個空的div，但是當然我們可以向div添加內容，居中仍然有效。而且這些居中技術同樣適用於div以外的元素。
最後
有興趣的可以看看原文，可以在線體驗不同顏色格式是如何工作的。看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～
專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）
