HTML是網頁制作的基礎語言，而網頁的布局是網頁制作的重要組成部分。HTML中的布局有多種方式，下面就來介紹一些常見的布局方式。

<!-- 水平居中 -->
<div style="text-align:center;">
<h1>Hello World!</h1>
<p>這是一個段落。</p>
</div>
<!-- 垂直居中 -->
<div style="position:relative; top:50%; transform:translateY(-50%);">
<h1>Hello World!</h1>
<p>這是一個段落。</p>
</div>
<!-- 柵格布局 -->
<div class="container">
<div class="row">
<div class="col-4">
<p>這是第一列。</p>
</div>
<div class="col-4">
<p>這是第二列。</p>
</div>
<div class="col-4">
<p>這是第三列。</p>
</div>
</div>
</div>
<!-- flex布局 -->
<div class="container">
<div class="flex-container">
<div class="item-1">
<p>這是第一項。</p>
</div>
<div class="item-2">
<p>這是第二項。</p>
</div>
<div class="item-3">
<p>這是第三項。</p>
</div>
</div>
</div>

以上代碼中，第一個是實現水平居中的布局，使用了樣式屬性text-align:center。第二個是實現垂直居中的布局，使用了相對定位和transform屬性。第三個是柵格布局，使用了Bootstrap框架的柵格系統。第四個是flex布局，使用了flex屬性。

在實現HTML布局時，需要根據實際需求選擇適當的布局方式。每種布局方式都有自己的特點和優缺點。熟練使用HTML布局，能夠讓網頁更具有吸引力和實用性。