<div>表單居中是指將HTML中的<form>表單元素在頁面中水平居中顯示。在實際開發中，經常會遇到需要將表單元素居中的情況，比如登錄表單、注冊表單等。本文將通過幾個代碼案例來詳細解釋如何實現表單居中的效果。</div>
<div>案例一：</div>

<div style="width: 300px; margin: 0 auto;">
<form>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="登錄">
</form>
</div>

<div>通過設置外層div的寬度為300px，并設置左右的margin為auto，可以實現表單在頁面中水平居中顯示的效果。</div>
<div>案例二：</div>

<div style="display: flex; justify-content: center;">
<form>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="登錄">
</form>
</div>

<div>通過設置外層div的display屬性為flex，并使用justify-content:center屬性，可以使表單元素在頁面中水平居中顯示。</div>
<div>案例三：</div>

<div style="text-align: center;">
<form style="display: inline-block;">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="登錄">
</form>
</div>

<div>通過設置外層div的text-align屬性為center，再將表單元素的display屬性設置為inline-block，可以實現表單在頁面中水平居中顯示。</div>
<div>：</div> <div>通過上述代碼案例的介紹，我們可以發現，要實現<div>表單居中的效果，可以通過設置外層div的一些樣式來達到。可以使用設置外層div的寬度并設置左右margin為auto的方式，利用flex布局的方式，或者是設置外層div的text-align屬性為center再將表單元素的display屬性設置為inline-block的方式。根據具體的開發需求、頁面布局等因素選擇一種合適的方式來實現表單的居中效果。</div>