在 HTML 中，盒子是非常重要的概念，關于盒子的屬性和樣式以及它們的位置和大小的控制是 web 開發中必須要掌握的技能。在本文中，我們將討論如何使用 HTML 和 CSS 來將盒子居中。

要居中一個盒子，我們需要使用 CSS 中的 position 屬性。position 屬性允許我們將元素放置在文檔的指定位置。當元素使用相對定位時，它是相對于它原來的位置進行移動的。而當元素使用絕對定位時，它是相對于整個頁面來定位的。

如果我們想要居中一個固定寬度和高度的盒子，我們可以使用以下代碼：

.box {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

上面的代碼中，我們將盒子的位置設置為絕對定位，然后將它的 top 和 left 屬性設置為 50%。這將使它垂直和水平居中。

但是，由于盒子本身的大小也是 200 像素，所以盒子的中心實際上是距離左邊和上邊 100 像素。因此，我們使用負的 margin 來將盒子向上和向左移動 100 像素以使其完美居中。

總之，使用 CSS 中的 position 屬性和 margin 屬性，我們可以輕松地將一個盒子居中。這是 web 開發中必須要學會的一項技能，因為它在設計網站時經常被使用到。