CSS是一種用于定義網(wǎng)頁樣式的語言。它提供了很多給網(wǎng)頁添加樣式的屬性，其中之一就是居中盒子。下面我們一起來了解CSS如何實現(xiàn)這個功能。

/* 水平居中 */
.box{
width: 200px;
margin: 0 auto;
}
/* 垂直居中 */
.box{
height: 200px;
position: absolute; /* 盒子需要是絕對定位 */
top: 50%;
margin-top: -100px; /* 盒子上移一半高度 */
}
/* 水平垂直居中 */
.box{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px; /* 盒子左移一半寬度 */
}
/* 彈性盒子水平垂直居中 */
.container{
display: flex;
justify-content: center;
align-items: center;
}

以上就是CSS居中盒子的幾種常見方法。其中，水平居中是最簡單的，只需要給盒子設(shè)置一個固定寬度，然后設(shè)置左右margin的值為auto即可。垂直居中和水平垂直居中需要用到絕對定位和負margin。彈性盒子水平垂直居中是CSS3新增的強大功能，可以更方便地實現(xiàn)居中效果。