在網(wǎng)頁設計中，居中是一種非常常見的布局方式。而在 CSS 中，實現(xiàn)居中也不難。下面將介紹幾種實現(xiàn)居中的方法。

/* 水平居中 */
.box {
width: 300px; /* 自定義容器寬度 */
margin: 0 auto; /* 上下為 0，左右為 auto */
}
/* 垂直居中 */
.box {
height: 150px; /* 自定義容器高度 */
position: relative;
}
.box div {
width: 100px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 向上移動自身高度的一半 */
margin-left: -50px; /* 移動自身寬度的一半 */
}
/* 水平垂直居中 */
.box {
width: 200px; /* 自定義容器寬度 */
height: 200px; /* 自定義容器高度 */
position: relative;
}
.box div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 向上移動自身高度的一半 */
margin-left: -50px; /* 向左移動自身寬度的一半 */
}

以上代碼分別是水平居中、垂直居中及水平垂直居中的實現(xiàn)方式。需要注意的是，在垂直居中的實現(xiàn)方式中，需要給容器指定相對定位，而其內(nèi)部的 div 則使用絕對定位，并通過 top、left 屬性來達到垂直、水平居中的效果。

以上是 CSS 中實現(xiàn)居中的幾種方式，使用不同方式可以依據(jù)實際需求靈活使用。