CSS中有三個盒子，分別是普通盒子、塊級盒子和行內盒子。那么如何讓它們居中呢？下面就讓我們來看看。

普通盒子居中：
div{
width: 200px;
height: 200px;
margin: 0 auto;
}

上面的代碼中，設置了一個div，它的寬和高都是200px，然后利用margin屬性，把它左右居中。其中，margin的值為0表示上下留白為0，auto表示左右自動分配寬度。

塊級盒子居中：
.container{
display: flex;
justify-content: center;
align-items: center;
}

如果我們想要讓一個塊級盒子居中，就可以通過flex布局來實現。對于容器類，設置display屬性為flex，并設置justify-content屬性為center，align-items屬性為center，就可以讓塊級盒子在水平和垂直方向都居中。

行內盒子居中：
span{
display: inline-block;
text-align: center;
line-height: 100px;
height: 100px;
width: 100px;
}

行內盒子可以使用text-align屬性來實現居中。但是需要先將行內盒子轉換成塊級盒子，使用display: inline-block; 把它變成塊級盒子，然后設置text-align: center; 讓它水平居中。同時，設置line-height和height，讓它在垂直方向上居中。