在進行頁面布局中，經常會出現需要將某個元素居中顯示的情況，這時候就需要用到CSS的居中布局。

橫向居中的方法如下：

.parent {
display: flex;
justify-content: center; /* 橫向居中 */
}

首先將父元素的display屬性設為flex，然后使用justify-content屬性設置子元素水平居中。可以看到，非常簡單實用！

縱向居中的方法如下：

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%); /* 縱向居中 */
}

首先將父元素設置為相對定位，然后將子元素設置為絕對定位，再使用top屬性將子元素向下移動到居中位置，transform屬性的translateY(-50%)作用是將子元素往上移動50%自身高度，即實現垂直居中的效果。

以上就是CSS橫向和縱向居中的方法。掌握了這些方法，我們就能輕松實現各種居中布局。