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 */
}`}

{`

    
Isi di sini
`}

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;
}`}

{`

    
Isi di sini
`}

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%);
}`}

{`

    
Isi di sini
`}

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;
}`}

{`
Isi di sini
`}

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;
}`}

{`

    
Isi di sini
`}

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 */
}`}

{`

    
Isi di sini
`}

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