\<div>元素是HTML中常用的容器元素之一。通過使用\<div>元素，可以將一組HTML元素組織在一起，并對其進行樣式化或布局。其中之一的常見用途是將文字在容器中居中顯示，即將文本內容在div元素的中央顯示。
下面將通過幾個代碼案例來詳細解釋如何使用CSS樣式將文字在div元素的中央顯示。
第一個案例，我們創建一個基本的HTML結構，其中包含一個\<div>元素和一段文字內容。代碼如下所示：
\
接下來，我們將使用CSS樣式將文字在div元素的中央顯示。代碼如下所示：
\
在上面的CSS代碼中，我們為\<div>元素指定了一個ID選擇器，即#container。通過設置text-align為center，我們將文本內容在水平方向上居中顯示。而通過display: flex、justify-content: center和align-items: center的組合，我們實現了在垂直方向上的居中顯示。最后，通過將height設置為100vh，我們確保\<div>元素高度占據整個視口的高度，以便能夠居中顯示。
第二個案例是使用絕對定位來實現文字在div元素的中央顯示。代碼如下所示：
\
在上面的CSS代碼中，我們為\<div>元素指定了position為relative，以便將其作為絕對定位元素的容器。我們設置了固定的寬度和高度，并為了清晰起見，添加了1像素的邊框。
接下來，通過display: flex、align-items: center和justify-content: center的組合，我們將文字在水平和垂直方向上居中顯示。
然后，我們為\
下面將通過幾個代碼案例來詳細解釋如何使用CSS樣式將文字在div元素的中央顯示。
第一個案例，我們創建一個基本的HTML結構，其中包含一個\<div>元素和一段文字內容。代碼如下所示：
\
\\<div id="container">
\<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed neque nec risus sollicitudin sodales sed sit amet erat. Ut dignissim tortor justo, sed sollicitudin mauris cursus sit amet. Morbi at purus fringilla, interdum erat ut, euismod urna. Suspendisse vestibulum sapien et urna porttitor, a vestibulum dolor hendrerit. Proin fringilla massa sed libero tristique mattis. Nam ultrices fermentum erat vitae ornare. Integer ac justo ut magna hendrerit ultricies. Fusce at urna ut turpis elementum feugiat id ac metus. Pellentesque vehicula venenatis velit, quis bibendum sapien pretium at. Nullam tincidunt consectetur fermentum. Vestibulum sagittis varius congue. Mauris consequat congue massa, vel accumsan metus ullamcorper at. Vestibulum ut placerat justo. Suspendisse elementum dui non enim varius vehicula.
\</p>
\</div>
\\接下來，我們將使用CSS樣式將文字在div元素的中央顯示。代碼如下所示：
\
\#container {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
\\在上面的CSS代碼中，我們為\<div>元素指定了一個ID選擇器，即#container。通過設置text-align為center，我們將文本內容在水平方向上居中顯示。而通過display: flex、justify-content: center和align-items: center的組合，我們實現了在垂直方向上的居中顯示。最后，通過將height設置為100vh，我們確保\<div>元素高度占據整個視口的高度，以便能夠居中顯示。
第二個案例是使用絕對定位來實現文字在div元素的中央顯示。代碼如下所示：
\
\#container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
<br>
#container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
\\在上面的CSS代碼中，我們為\<div>元素指定了position為relative，以便將其作為絕對定位元素的容器。我們設置了固定的寬度和高度，并為了清晰起見，添加了1像素的邊框。
接下來，通過display: flex、align-items: center和justify-content: center的組合，我們將文字在水平和垂直方向上居中顯示。
然后，我們為\
元素指定了position為absolute，并使用top: 50%和left: 50%將其定位到父元素的中央。最后，通過transform: translate(-50%, -50%)將文字內容向左上方偏移50%，以使其在垂直和水平方向上都能夠居中顯示。
通過上述兩個案例，我們可以看到如何使用CSS樣式將文字在\<div>元素的中央顯示。無論是使用flex布局還是絕對定位，通過適當的CSS樣式設置，都能夠輕松實現這一效果。這將為網頁設計提供更多的靈活性和美觀性。