在Web開發中，CSS盒模型是非常重要的概念。盒模型是將HTML元素看作一個矩形盒子的模型，其中包含了內容區塊、內邊距、邊框和外邊距。居中是我們在使用CSS時經常遇到的問題之一，那么下面我們就來介紹幾種不同情況下的CSS盒子居中實現方法。

// 水平居中
.box {
width: 200px;
height: 100px;
background-color: #ccc;
position: relative;
left: 50%;
transform: translateX(-50%);
}

對于一個固定寬度的塊級元素，可以將其左邊距離設為50%，再向左移動一半寬度的距離（即負的50%寬度），就可以實現水平居中。

// 垂直居中1
.box {
width: 200px;
height: 100px;
background-color: #ccc;
position: relative;
top: 50%;
transform: translateY(-50%);
}

同樣地，對于一個固定高度的塊級元素，可以將其上邊距離設為50%，再向上移動一半高度的距離（即負的50%高度），就可以實現垂直居中。

// 垂直居中2
.outer {
display: table-cell;
vertical-align: middle;
}
.inner {
width: 200px;
height: 100px;
background-color: #ccc;
display: inline-block;
}

以上兩種方法只適用于在父級元素已知寬高的情況下。如果父級元素的寬高不確定，可以使用display: table-cell + vertical-align: middle。在這種方法中，將父級元素設置為table-cell，將子元素設置為inline-block，然后使用vertical-align: middle就可以使子元素垂直居中。

總之，在Web開發中，合適地使用CSS盒子居中方法可以使網站設計樣式更加美觀，布局也更加合理。