div 子元素居中

在網頁布局中，我們經常會遇到需要將 div 元素內的子元素居中顯示的情況。div 子元素居中可以通過不同的方法來實現，本文將介紹幾個常見的方法。

方法一：使用 flexbox 屬性

Flexbox 是一種 CSS3 布局模式，可以方便地實現子元素在容器中的居中顯示。使用該屬性時，將父容器（即 div 元素）的 <em>display</em> 屬性設置為 <em>flex</em>，并將其子元素的 <em>align-items</em> 和 <em>justify-content</em> 屬性均設置為 <em>center</em>。

<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
}
</style>
<br>
  <div class="container">
<p>子元素居中顯示</p>
</div>

方法二：使用 position 和 transform 屬性

另一種常見的實現子元素居中的方法是使用 <em>position</em> 和 <em>transform</em> 屬性。將父容器設置為 <em>position: relative;</em>，然后將子元素設置為 <em>position: absolute;</em>，并使用 <em>top: 50%; left: 50%;</em> 將子元素的左上角移動到容器的中心位置。最后使用 <em>transform: translate(-50%, -50%);</em> 將子元素自身的中心點移動到容器的中心位置。

<style>
.container {
position: relative;
height: 200px;
}
<br>
    .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<br>
  <div class="container">
<p class="child">子元素居中顯示</p>
</div>

方法三：使用 text-align 和 margin 屬性

如果要將文本元素居中顯示，我們可以使用 <em>text-align</em> 屬性將父容器的內容水平居中。而對于其他非文本元素，可以通過設置父容器的 <em>text-align</em> 屬性為 <em>center</em>，再在子元素上設置 <em>display: inline-block;</em> 和 <em>margin: 0 auto;</em> 來實現水平居中。

<style>
.container {
text-align: center;
height: 200px;
}
<br>
    .child {
display: inline-block;
margin: 0 auto;
}
</style>
<br>
  <div class="container">
<p>子元素居中顯示</p>
</div>

通過以上三種方法，我們可以輕松實現 div 元素內的子元素居中顯示。根據實際需求和場景的不同，我們可以選擇最適合自己的方法來實現子元素居中。