<div>居中是網頁布局中的一個常見需求。在傳統的CSS中，實現居中需要編寫大量的樣式代碼。而使用Bootstrap框架可以簡化這個過程。Bootstrap提供了多個類來實現div的居中，包括居中于父元素、居中于屏幕等。本文將以幾個代碼案例來詳細解釋Bootstrap如何實現div的居中。

案例一：居中于父元素

<div>

<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 text-center">
<p>這個div會居中于父元素</p>
</div>
</div>
</div>

</div>

在這個案例中，我們使用了Bootstrap的.container、.row和.col-md-6類來創建了一個父元素和一個子元素,子元素的寬度為父元素的一半。.offset-md-3類用于向右偏移父元素的3個網格單位，從而使子元素水平居中。最后，.text-center類用于使子元素的內容在子元素中垂直居中。

案例二：居中于屏幕

<div>

<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 text-center align-self-center">
<p>這個div會居中于屏幕</p>
</div>
</div>
</div>

</div>

在這個案例中，除了使用.container、.row和.col-md-6等類，我們還使用了.align-self-center類。這個類用于使子元素垂直居中，同時結合了之前提到的.text-center類，使子元素的內容在子元素中垂直居中。

通過以上兩個案例，我們可以看到使用Bootstrap可以輕松實現div的居中效果。無論是居中于父元素還是居中于屏幕，只需要添加相應的類即可。這大大簡化了布局中居中的操作，提高了開發效率。

起來，Bootstrap提供了多個類來實現div居中，其中包括居中于父元素和居中于屏幕。通過添加相應的類，我們可以輕松實現網頁布局中的居中效果。這為我們的開發工作帶來了便利，提高了開發效率。