在網頁布局中，居中是一個非常重要的問題，而 CSS 樣式可以很好地實現此功能。下面我們來介紹一些常用的將盒子居中的方法。

//1. 水平居中
.box{
margin: 0 auto;
}
//2. 垂直居中
.box{
position: relative;
}
.box-child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
//3. 水平和垂直居中
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//4. 彈性盒子居中
.container{
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.box{
width: 200px;
height: 200px;
}

通過上述幾種方法，我們可以快速地將盒子居中。需要注意的是，在使用絕對定位時，父元素需要設置為相對定位。此外，在使用彈性布局時，需要設置父元素的寬度和高度。