使用 CSS 使 Div 居中的各種有效方法

介紹

使用 CSS 將 div 元素定位在中心有多種方法。以下是一些常用的方法：

1. 使用彈性盒

Flexbox 是最受歡迎的水平和垂直居中元素的方法之一。

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

2. 使用網格佈局

CSS 網格也提供了一種將元素置中的簡單方法。

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

3. 使用絕對位置和變換

此方法使用position:absolute和transform將元素定位在中心。

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

4. 使用自動保證金

此方法用於將元素水平放置在中心並具有自動邊距。然而，對於垂直方向，需要額外的技巧。

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`<div class="centered">Isi di sini</div>`}

5. 使用文字對齊和行高（僅水平居中）

這對於文字或內聯塊元素非常有效。

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

6. 使用表格顯示

這是一種較舊的技術，但仍然有效。

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`<div class="container">
    <div class="centered">Isi di sini</div>
</div>`}

結論

對於將元素水平和垂直居中在頁面中間，Flexbox 和 Grid 方法是最簡單、最現代的方法。然而，根據專案的需要，其他方法可能仍然有用。感謝您閱讀本文到最後

以上是使用 CSS 使 Div 居中的各種有效方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！