<div> 在 HTML 中是一個(gè)常用的標(biāo)簽，用于定義文檔中的一個(gè)部分或一個(gè)容器。在許多情況下，我們希望在一個(gè)<div> 中的內(nèi)容在水平方向上居中顯示，即使父元素的寬度改變也能保持居中狀態(tài)。下面將通過(guò)幾個(gè)代碼案例詳細(xì)解釋如何在<div> 中實(shí)現(xiàn)左右居中顯示。
，我們可以使用 CSS 的 flexbox 來(lái)實(shí)現(xiàn)<div> 中內(nèi)容的左右居中顯示。Flexbox 提供了一組強(qiáng)大的布局功能，可以簡(jiǎn)單優(yōu)雅地實(shí)現(xiàn)各種布局需求。通過(guò)設(shè)置<div> 的 display 屬性為 "flex"，并在內(nèi)部元素上應(yīng)用"margin: auto"，我們可以實(shí)現(xiàn)內(nèi)容的居中顯示。
下面是一個(gè)示例代碼：

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
background-color: lightblue;
}
.content {
margin: auto;
background-color: white;
padding: 20px;
}
</style>
<br>
<div class="container">
<div class="content">
<p>這是一個(gè)左右居中顯示的內(nèi)容</p>
</div>
</div>

在上面的代碼中，我們創(chuàng)建了一個(gè)名為"container"的<div>，并通過(guò)設(shè)置寬度、高度和背景顏色來(lái)定義容器樣式。然后，在內(nèi)部的<div> 上應(yīng)用了"margin: auto"來(lái)實(shí)現(xiàn)內(nèi)容的左右居中。最后，我們?cè)趦?nèi)容<div> 中添加了一個(gè)

標(biāo)簽作為展示文字。
我們還可以使用 CSS 的 absolute 定位方式來(lái)實(shí)現(xiàn)<div> 中內(nèi)容的左右居中顯示。通過(guò)設(shè)置內(nèi)部元素的 left 和 right 屬性為 0，并將 margin 設(shè)置為 "auto"，我們可以實(shí)現(xiàn)內(nèi)容的水平居中。
下面是一個(gè)使用 absolute 定位的示例代碼：

<style>
.container {
position: relative;
width: 100%;
height: 200px;
background-color: lightblue;
}
.content {
position: absolute;
left: 0;
right: 0;
margin: auto;
background-color: white;
padding: 20px;
}
</style>
<br>
<div class="container">
<div class="content">
<p>這是一個(gè)左右居中顯示的內(nèi)容</p>
</div>
</div>

在上面的代碼中，我們?cè)O(shè)置了"container"的樣式和寬高，并將其設(shè)置為相對(duì)定位。然后，我們使用 absolute 定位方式將內(nèi)容<div> 設(shè)置為相對(duì)于父元素進(jìn)行定位。通過(guò)設(shè)置 left 和 right 屬性為 0，并將 margin 設(shè)置為 "auto"，內(nèi)容<div> 將自動(dòng)水平居中。
起來(lái)，通過(guò)使用 CSS 的 flexbox 或 absolute 定位，我們可以實(shí)現(xiàn)<div> 內(nèi)容的左右居中顯示。這些方法非常靈活且適用于各種情況。選擇合適的方法取決于具體的布局需求和項(xiàng)目要求。希望本文能幫助你理解和應(yīng)用<div> 中的左右居中顯示技術(shù)。