使用 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中文网其他相关文章！