在網頁設計中，HTML盒子的居中對于頁面布局來說至關重要，本文將給出一個簡單的代碼例題，幫助讀者快速掌握HTML盒子居中的方法。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<p>這里是居中內容</p>
</div>
</body>
</html>在這個例題中，我們首先定義了一個容器（container）的樣式屬性，其中包含一個寬高分別為300px的盒子，背景顏色設置為淺灰色（#eee），接下來就是關鍵代碼了：
display: flex;
justify-content: center;
align-items: center;這三行代碼使用的是Flex布局，在容器中定義了display為flex，即開啟了Flex布局，接下來的兩行代碼作用分別是水平居中和垂直居中。
如果還不了解Flex布局的同學，可以參照以下鏈接進行學習：
https://www.runoob.com/w3cnote/flex-grammar.html
通過以上代碼，我們可以輕松地實現HTML盒子的居中，希望本文對大家在網頁設計中解決問題有所幫助。