div 平居中是一種常見的布局需求，特別是在前端開發中。簡單來說，div 平居中意味著將一個 div 元素在其父元素中水平和垂直居中顯示。這在網頁設計中是非常常見的布局方式，可以使頁面看起來更加整齊、美觀。
下面將通過幾個代碼案例來詳細解釋如何實現 div 平居中的效果。
，我們可以使用相對定位（relative）和負邊距（negative margin）的方式來實現 div 平居中。具體代碼如下：

<p><style></p>
<p>  .container {</p>
<p>    position: relative;</p>
<p>  }</p>
<p>  .centered-div {</p>
<p>    position: absolute;</p>
<p>    top: 50%;</p>
<p>    left: 50%;</p>
<p>    transform: translate(-50%, -50%);</p>
<p>  }</p>
<p></style></p>
<p><div class="container"></p>
<p>  <div class="centered-div"></p>
<p>    This div is horizontally and vertically centered.</p>
<p>  </div></p>
<p></div></p>

上述代碼中，我們使用了相對定位將容器 div（class="container"）設為相對定位。然后，在子元素 div（class="centered-div"）中使用絕對定位，并通過設置 top: 50% 和 left: 50% 將其相對于容器居中。同時，transform: translate(-50%, -50%) 的屬性值用于修正子元素的偏移，使其完全居中。
，我們還可以使用 Flexbox 實現 div 的平居中效果。Flexbox 是 CSS3 引入的一種彈性盒子布局模型，可以較為方便地實現元素的對齊和布局調整。下面是一個使用 Flexbox 的代碼示例：

<p><style></p>
<p>  .container {</p>
<p>    display: flex;</p>
<p>    justify-content: center;</p>
<p>    align-items: center;</p>
<p>    height: 100vh;</p>
<p>  }</p>
<p>  .centered-div {</p>
<p>    text-align: center;</p>
<p>  }</p>
<p></style></p>
<p><div class="container"></p>
<p>  <div class="centered-div"></p>
<p>    This div is horizontally and vertically centered.</p>
<p>  </div></p>
<p></div></p>

在上面的代碼中，我們通過設置容器 div 的 display: flex，justify-content: center 和 align-items: center 三個屬性來實現子元素的水平和垂直居中。同時，為了使效果更好，我們為容器 div 設置了一個高度（height: 100vh）。
來說，實現 div 平居中有多種方式，其中相對定位和負邊距、Flexbox 都是常見且有效的方法。開發者可以根據具體的需求和場景選擇合適的方式來實現。例如，對于需要兼容性較好的情況，相對定位和負邊距是一個不錯的選擇；而對于現代瀏覽器環境下，使用 Flexbox 是更加便捷和靈活的解決方案。
參考文獻： 1. "CSS 居中對齊的多種方式（完全解析）"（https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/） 2. "Centering in CSS: A Complete Guide"（https://css-tricks.com/centering-css-complete-guide/）