<bootrap div 居中>
在前端開發中，經常會遇到需要將一個div居中顯示的情況。Bootstrap是一套流行的前端開發框架，它提供了豐富的CSS和JavaScript組件，可以簡化我們的開發過程。其中，Bootstrap也提供了一種簡單而有效的方式來居中一個div，下面我們將通過幾個代碼案例來詳細解釋和說明。
案例一：
```html <div class="container"> <div class="row justify-content-center"> <div class="col-md-4">

這是一個居中顯示的div！

</div> </div> </div> ```
在這個案例中，我們使用Bootstrap的`container`類來創建一個容器，然后使用`row`和`justify-content-center`類來居中顯示一個div。通過設置`col-md-4`類，我們可以控制該div的寬度，這里設置為占據容器的4列寬度。
案例二：
```html <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div class="d-inline-block">

這是另一個居中顯示的div！

</div> </div> </div> </div> ```
在這個案例中，我們同樣使用了Bootstrap的`container`類來創建一個容器。通過使用`row`和`col-md-12`類，我們創建了一個占據整行的div，并通過`text-center`類來使其文本內容居中顯示。同時，使用`d-inline-block`類來將文本內容封裝在一個div中，從而使其居中顯示。
案例三：
```html <div class="d-flex align-items-center justify-content-center" style="height: 200px;"> <div>

這是另一個居中顯示的div！

</div> </div> ```
在這個案例中，我們使用了`d-flex`、`align-items-center`和`justify-content-center`類來實現div的居中顯示。通過設置外部div的高度為200px，我們可以控制div的垂直居中顯示。同時，內部div將其子元素居中顯示。
通過上述的幾個案例，我們可以看到Bootstrap提供了幾種不同的方式來實現div的居中顯示。根據具體的需求和布局，我們可以選擇合適的方式來實現居中效果。在實際開發中，這些方法可以極大地簡化我們的布局工作，提高開發效率。