在 CSS 中，我們可以使用display屬性和float屬性來控制盒子的水平和垂直布局。

首先，讓我們來看看水平布局:

.container{
display: flex; /* 設置為 flex 布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

上面的代碼將把一個容器包裹的內容水平居中并垂直居中。我們使用display: flex將容器設置為彈性布局。然后，使用justify-content: center將內容水平居中，同時使用align-items: center將內容垂直居中。

接下來，我們來看看垂直布局:

.container{
position: relative; /* 設置為相對定位 */
}
.box{
position: absolute; /* 設置為絕對定位 */
top: 50%; /* 相對于容器上邊框的距離為 50% */
transform: translateY(-50%); /* 沿 Y 軸向上平移自身高度的一半 */
}

上面的代碼將把一個盒子垂直居中。我們使用position: relative使容器成為相對定位元素，將position: absolute應用于盒子來使其成為絕對定位元素。然后，使用top: 50%將盒子的頂部位置移動到容器的上邊框的中心，最后使用transform: translateY(-50%)使盒子沿 Y 軸向上平移自身高度的一半。