許多時候，我們需要使用CSS來讓元素居中顯示，這可以輕松地實現網頁設計的美觀和風格。下面是一些CSS居中的方法。

/* 水平居中 */
div {
width: 50%;
margin: 0 auto;
}
/* 垂直居中 */
div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* 水平和垂直居中 */
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 文字居中 */
div {
text-align: center;
}

以上代碼是最基本的CSS居中方式，通過設置不同的屬性和值，可以在不同的情況下實現不同的居中效果。例如，在水平居中的方法中，我們將元素的寬度設置為50%，這意味著元素在其容器內水平居中。然后，我們使用margin屬性將元素頂部和底部的外邊距設置為0，將左側和右側的外邊距設置為自動。這就會將元素在頁面中水平居中。

在垂直居中的方法中，我們使用position屬性將元素的位置設置為absolute，這就允許我們使用top和left屬性來定位它。我們將top的值設置為50%，意味著我們想要元素位于上下容器內的正中央。但這只讓元素的頂部放在了中央。所以我們使用transform屬性，將元素向上移動50%。這樣就可以垂直居中元素了。

最后，我們在水平和垂直居中的方法中，結合使用了以上兩種方式。這個時候需要設置元素的left值為50%，以將其水平居中。在top屬性依然設為50%的情況下，使用translate()方法將元素向上和向左移動50%的距離即可實現同時水平、垂直居中的效果。

最后，文本內容的居中可以直接使用text-align屬性，并將其值設置為center。這樣，元素內部的文本就可以居中顯示了。