在制作網頁的過程中，讓盒子居中是一個常見的需求，本文將介紹css中如何實現盒子居中的方法。 一、讓盒子水平居中 如果要讓盒子水平居中，可以設置盒子的寬度和左右外邊距為auto，如下所示： ``` .box { width: 200px; /* 設置寬度 */ margin: 0 auto; /* 設置左右外邊距為auto */ } ``` 這樣就可以讓盒子在父元素中水平居中了。 二、讓盒子垂直居中 如果要讓盒子垂直居中，可以使用css3中的flex布局，如下所示： ``` .container { display: flex; align-items: center; justify-content: center; } .box { width: 200px; height: 200px; } ``` 這樣就可以讓盒子在父元素中垂直居中了。 三、讓盒子水平垂直居中 如果要讓盒子水平垂直居中，可以把上述兩種方法結合起來使用，如下所示： ``` .container { display: flex; align-items: center; justify-content: center; height: 100vh; /* 設置高度為視口高度 */ } .box { width: 200px; height: 200px; } ``` 這樣就可以讓盒子在父元素中水平垂直居中了。 使用上述方法可以讓盒子在css中實現居中效果，不同的需求可以選擇不同的方法實現。