CSS 的居中顯示是網(wǎng)頁設(shè)計中非常常見的一種技巧。在布局元素時，通常需要將元素沿水平方向和垂直方向居中，以提高網(wǎng)頁的美觀度。下面我們將介紹 CSS 中的幾種居中顯示方法。

/* 水平居中 */
.container {
display: flex;
justify-content: center;
}
/* 或者 */
.container {
text-align: center;
}
.container span {
display: inline-block;
}
/* 垂直居中 */
.container {
display: flex;
align-items: center;
}
/* 或者 */
.container {
position: relative;
}
.container img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上代碼中，我們使用了兩種實現(xiàn)水平居中的方法：flex 布局和 text-align 屬性。其中 flex 布局需要在容器上設(shè)置 display: flex; 并且使子元素居中，而 text-align 屬性則通過設(shè)置子元素為內(nèi)聯(lián)元素實現(xiàn)居中。

與此類似，實現(xiàn)垂直居中我們也有兩種方法：使用 flex 布局或者絕對定位與 transform 屬性。使用 flex 布局只需要在容器上設(shè)置 align-items: center; 即可實現(xiàn)垂直居中。絕對定位與 transform 屬性方式將圖片絕對定位在容器中央，然后通過 transform: translateY(-50%); 屬性來使其上下居中對齊。