Introduction

Il existe plusieurs façons de positionner un élément div au centre en utilisant CSS. Voici quelques méthodes courantes :

1. Utiliser Flexbox

Flexbox est l'une des méthodes les plus populaires pour centrer des éléments horizontalement et verticalement.

{` .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. Utilisation de la disposition en grille

CSS Grid fournit également un moyen simple de centrer les éléments.

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

{`

    
Isi di sini
`}

3. Utilisation de la position absolue et de la transformation

Cette méthode utilise position: Absolute et transform pour positionner l'élément au centre.

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

{`

    
Isi di sini
`}

4. Utiliser la marge automatique

Cette méthode permet de positionner les éléments horizontalement au centre avec des marges automatiques. Cependant, pour le vertical, des astuces supplémentaires sont nécessaires.

{`.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. Utilisation de l'alignement du texte et de la hauteur de ligne (centrage horizontal uniquement)

Cela fonctionne bien pour les éléments de texte ou de bloc en ligne.

{`.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. Utilisation de l'affichage du tableau

Il s'agit d'une technique plus ancienne mais elle fonctionne toujours.

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

Pour centrer des éléments au milieu de la page horizontalement et verticalement, les méthodes Flexbox et Grid sont les plus simples et les plus modernes. Cependant, d'autres méthodes peuvent encore être utiles en fonction des besoins du projet. Merci d'avoir lu cet article jusqu'au bout