在CSS中，如何把盒子居中是經常被問到的問題。接下來，我們將討論三種方法來設置CSS盒子的居中顯示：水平居中、垂直居中和水平垂直同時居中。

一、水平居中

.container {
display: flex;
justify-content: center;
}

以上代碼將會讓包含盒子的容器向頁面水平中心位置對齊。其中，display: flex; 表示要使用flex布局，justify-content: center; 表示讓盒子水平居中對齊。

二、垂直居中

.container {
position: relative;
}
.box {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上代碼將會讓包含盒子的容器向頁面垂直中心位置對齊。其中，position: relative; 表示要使用相對定位，position: absolute; 表示要使用絕對定位，top: 50%; 表示讓盒子距離容器頂部為50%，transform: translateY(-50%); 表示讓盒子上下移動相同的距離以達到垂直居中的效果。

三、水平垂直同時居中

.container {
display: flex;
justify-content: center;
align-items: center;
}

以上代碼將會讓包含盒子的容器同時水平垂直居中對齊。其中，display: flex; 表示要使用flex布局，justify-content: center; 表示讓盒子水平居中對齊，align-items: center; 表示讓盒子垂直居中對齊。

總結：

CSS盒子的居中有多種方式。以上所提及的方法只是其中的一部分。根據實際情況選擇合適的方法。同時，可以借助瀏覽器的開發者工具來調試自己的代碼，以達到最佳的顯示效果。