div 居中并排是指把多個div元素在水平方向上居中排列。在網頁設計中，經常會需要將多個div元素并排顯示，以實現頁面布局的效果。本文將通過幾個代碼案例來詳細解釋和說明如何使用CSS實現div居中并排的效果，并參考其他文章中的真實案例。
，我們來看一個簡單的例子，其中有三個div元素需要在水平方向上居中并排顯示。我們可以使用CSS的flex布局來實現這個效果。

<style>
.container {
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平居中排列 */
}
<br>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 0 10px; /* 為了讓div之間有間距 */
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在上面的代碼中，我們定義了一個包含三個div元素的容器，即.container，使用了display: flex;來啟用flex布局。然后通過設置justify-content: center;可以實現水平方向上居中排列的效果。
接下來，我們來看一個稍微復雜一些的例子，其中有四個div元素需要在水平方向上居中并排顯示，并且其中一個div元素需要放置在容器的中間位置。

<style>
.container {
display: flex;
justify-content: center;
}
<br>
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 0 10px;
}
<br>
.box.center {
align-self: center; /* 單獨設置中間div元素的位置 */
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box center"></div>
<div class="box"></div>
</div>

在上面的代碼中，我們新增了一個.box.center的樣式規則，用來單獨設置中間的div元素的位置，通過設置align-self: center;可以實現垂直方向上居中。這樣就能夠實現中間的div元素放置在容器的中心位置。
最后，我們來參考一篇真實的案例來進一步說明div居中并排的效果。

<style>
.container {
display: flex;
justify-content: center;
}
<br>
.box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 0 10px;
<br>
  display: flex;
justify-content: center;
align-items: center;
}
<br>
.content {
text-align: center;
}
</style>
<br>
<div class="container">
<div class="box">
<div class="content">
<h1>這是一個居中的div</h1>
<p>這是居中的文字內容</p>
</div>
</div>
<div class="box"></div>
<div class="box"></div>
</div>

在上面的代碼中，我們將div元素作為.box的子元素，在.box中添加了.content來包裹文字內容。然后，通過設置.box的display: flex;、justify-content: center;和align-items: center;，可以實現文字和div元素在容器中水平垂直居中的效果。
來說，通過CSS的flex布局和一些樣式設置，我們可以很方便地實現div元素的居中并排效果。無論是簡單的排列還是復雜的布局，都可以通過這種方式來輕松實現。同時，我們也可以參考其他文章中的真實案例，進一步豐富和優化我們的頁面布局效果。