Diverses façons efficaces de centrer les divisions avec CSS

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

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

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

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

3. Utilisation de la position absolue et de la transformation

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

{`.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. Utiliser la marge automatique

Cette méthode permet de positionner les éléments horizontalement au centre avec des marges automatiques. Cependant, pour la verticale, 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;
}`}

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

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

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

6. Utilisation de l'affichage du tableau

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!