Various Effective Ways to Center Divs with CSS

Introduction

There are several ways to position a div element in the center using CSS. Here are some common methods:

1. Using Flexbox

Flexbox is one of the most popular methods for centering elements horizontally and vertically.

{` .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. Using Grid Layout

CSS Grid also provides an easy way to center elements.

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

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

3. Using Absolute Position and Transform

This method uses position: absolute and transform to position the element in the center.

{`.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. Using Auto Margin

This method is used to position elements horizontally in the center with automatic margins. However, for vertical, additional tricks are needed.

{`.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. Using Text-align and Line-height (Horizontal Centering Only)

This works well for text or inline-block elements.

{`.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. Using Table Display

This is an older technique but it still works.

{`.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>`}

Conclusion

For centering elements in the middle of the page both horizontally and vertically, the Flexbox and Grid methods are the easiest and most modern. However, other methods may still be useful depending on the needs of the project. Thank you for reading this article to the end

The above is the detailed content of Various Effective Ways to Center Divs with CSS. For more information, please follow other related articles on the PHP Chinese website!