CSS 居中div

CSS 是一種用于網頁樣式設計的語言，而 "居中div" 是指在網頁中將一個 div 元素居中顯示，即使在不同的屏幕尺寸或瀏覽器窗口大小下也能保持居中狀態。在本文中，我們將通過幾個代碼案例來詳細解釋如何使用 CSS 實現居中 div 效果。

1. 居中文本內容

，讓我們了解如何通過 CSS 使文本內容在 div 元素中居中顯示。可以使用以下代碼來實現：

<code>
<style>
.centered-text {
text-align: center;
}
</style>
<br>
<div class="centered-text">
<p>這是居中文本內容的例子</p>
</div>
</code>

在上面的代碼中，我們使用了一個類名為 "centered-text" 的 div 元素，并在 CSS 樣式中設置了 "text-align: center;"，這樣就能使文本內容在 div 元素中水平居中顯示。

2. 居中div 水平顯示

接下來，我們將學習如何在水平方向上居中顯示一個 div 元素。可以使用以下代碼來實現：

<code>
<style>
.horizontally-centered {
display: flex;
justify-content: center;
}
</style>
<br>
<div class="horizontally-centered">
<p>這是水平居中顯示的 div</p>
</div>
</code>

在上面的代碼中，我們使用了一個類名為 "horizontally-centered" 的 div 元素，并在 CSS 樣式中設置了 "display: flex;" 和 "justify-content: center;"。這樣就能使 div 元素在水平方向上居中顯示。

3. 居中div 垂直顯示

現在，讓我們來學習如何在垂直方向上居中顯示一個 div 元素。可以使用以下代碼來實現：

<code>
<style>
.vertically-centered {
display: flex;
align-items: center;
}
</style>
<br>
<div class="vertically-centered">
<p>這是垂直居中顯示的 div</p>
</div>
</code>

在上面的代碼中，我們使用了一個類名為 "vertically-centered" 的 div 元素，并在 CSS 樣式中設置了 "display: flex;" 和 "align-items: center;"。這樣就能使 div 元素在垂直方向上居中顯示。

4. 居中div 水平和垂直顯示

最后，我們將學習如何同時在水平和垂直方向上居中顯示一個 div 元素。可以使用以下代碼來實現：

<code>
<style>
.centered-div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<br>
<div class="centered-div">
<p>這是水平和垂直居中顯示的 div</p>
</div>
</code>

在上面的代碼中，我們使用了一個類名為 "centered-div" 的 div 元素，并在 CSS 樣式中設置了 "position: absolute;"、"left: 50%;"、"top: 50%;" 和 "transform: translate(-50%, -50%);"。這樣就能使 div 元素同時在水平和垂直方向上居中顯示。

通過以上的代碼案例，我們詳細解釋了如何使用 CSS 將 div 元素居中顯示。無論是在文本內容、水平方向、垂直方向還是同時在水平和垂直方向上居中顯示，我們可以根據需求選擇相應的方法來實現居中效果。