<div>是HTML中最常見的元素之一，它被用于創建各種不同的結構和布局。而使一個<div>元素在頁面居中顯示是一個常見的需求。在本文中，我們將看到幾個常用的代碼案例，以及它們是如何實現將<div>元素居中顯示的。

第一種常見的居中方式是通過使用CSS的flexbox布局。Flexbox布局是一種現代的CSS布局模型，能夠輕松地實現各種不同的布局需求，包括居中顯示元素。

.container {
display: flex;
justify-content: center;
align-items: center;
}

上面的代碼中，我們創建了一個名為.container的CSS類，其中display: flex將其設置為使用flexbox布局。justify-content: center和align-items: center則分別將子元素在水平和垂直方向上居中對齊。

第二種常見的居中方式是通過使用CSS的margin屬性來實現。這種方法可以用于居中任何塊級元素，包括<div>元素。

.container {
position: relative;
}
<br>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代碼中，我們創建了一個含有兩個CSS類的容器。，通過設置position: relative，我們確保.container類成為.center類的相對定位容器。然后，.center類使用position: absolute進行絕對定位，并設置top和left屬性的值為50%，這樣.center類將被定位在.container容器的中心位置。最后，使用transform: translate(-50%, -50%)將.center類向左和向上移動自身寬度和高度的50%，從而實現元素在水平和垂直方向上的居中。

第三種常見的居中方式是通過使用CSS的grid布局。Grid布局是一種強大的CSS布局模型，可以將元素劃分為網格，并按照這些網格對元素進行布局。

.container {
display: grid;
place-items: center;
}

上面的代碼中，我們將.container類設置為使用grid布局，并使用place-items: center來將元素在網格中居中顯示。

一下，我們在本文中學習了三種常見的方法來實現<div>元素的居中顯示。第一種是通過使用CSS的flexbox布局，其中我們將父容器設置為display: flex，并使用justify-content: center和align-items: center來使子元素在水平和垂直方向上居中對齊。第二種是通過使用CSS的margin屬性，其中我們使用絕對定位和transform屬性來使元素在容器中水平和垂直居中。第三種是通過使用CSS的grid布局，我們將容器設置為display: grid，并使用place-items: center來將元素在網格中居中顯示。

參考文獻：

- "How To Center a Div" by W3Schools - https://www.w3schools.com/howto/howto_css_center_div.asp

- "How To Center Content With CSS Grid" by Smashing Magazine - https://www.smashingmagazine.com/2021/03/center-content-css-grid/