CSS 網頁居中是網頁設計中比較常見的布局方式，下面我們將學習如何用 CSS 讓網頁元素水平居中或垂直居中。

水平居中：

/* 塊級元素水平居中 */
#box {
width: 300px;
margin: 0 auto;
}
/* 行內元素水平居中 */
span {
display: inline-block;
text-align: center;
width: 100%;
}

垂直居中：

/* 父元素為 flex 容器，子元素垂直居中 */
.container {
display: flex;
align-items: center;
justify-content: center; /* 橫向居中 */
height: 300px;
}
.item {
margin: auto;
}
/* 父元素為相對定位，使用絕對定位水平垂直居中 */
.parent {
position: relative;
height: 300px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上就是常見的 CSS 網頁居中方式，可以根據實際需求選擇使用哪種方式。