HTML和CSS是構建網頁最基本的工具，其中盒子作為頁面的基本元素，我們經常需要對其進行設置。其中一個常用的設置就是把盒子居中，下面來介紹具體的實現方法。

首先，盒子的居中可以分為水平居中和垂直居中兩種情況。

對于水平居中，我們可以使用以下代碼來使一個盒子居中：

<div class="centered">
<p>這是一個居中的盒子</p>
</div>
.centered {
width: 200px; /*設置盒子寬度*/
margin: 0 auto; /*設置左右外邊距為自動，實現水平居中*/
}

上述代碼中，我們通過設置盒子的寬度為200px，并且將左右外邊距設置為自動，從而實現了盒子的水平居中。

對于垂直居中，我們可以使用以下代碼來使一個盒子居中：

<div class="centered2">
<p>這是一個居中的盒子</p>
</div>
.centered2 {
position: absolute; /*設置定位方式為絕對定位*/
top: 50%; /*設置上邊距為50%*/
left: 50%; /*設置左邊距為50%*/
transform: translate(-50%, -50%); /*使用transform屬性居中*/
}

上述代碼中，我們通過將盒子的定位方式設置為絕對定位，并將上邊距和左邊距都設置為50%。接著，我們使用transform屬性并設置translate(-50%,-50%)，從而實現了盒子的垂直居中。

以上就是使用HTML和CSS設置盒子居中的方法。通過學習和實踐，我們可以更加熟練地掌握如何對網頁進行布局和樣式的設置。