Comment centrer un élément dans une fenêtre de navigateur à l'aide de CSS ?

Positionnement d'un élément au centre de la fenêtre du navigateur

Il peut être courant de placer précisément un élément Web au milieu de la fenêtre du navigateur, quelle que soit sa taille ou d'autres facteurs. Ceci peut être réalisé en utilisant les propriétés de positionnement CSS.

Solution :

Pour centrer un élément dans la fenêtre du navigateur, nous utilisons le CSS suivant :

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Explication :

• Position : absolue; Supprime l'élément du flux normal, lui permettant d'être positionné avec précision.
• Haut : 50 % ; Positionne le haut de l'élément à 50 % du haut du navigateur window.
• Gauche : 50%; Positionne le bord gauche de l'élément à 50% du bord gauche de la fenêtre du navigateur.
• Transform : translate(-50%,-50%); Ajuste la position de l'élément pour le décaler efficacement de 50 % dans les directions horizontale et verticale. Cela centre l'élément dans sa zone d'origine.

En combinant ces propriétés, nous pouvons obtenir un centrage précis de tout élément HTML dans la fenêtre du navigateur, quelle que soit sa taille ou sa disposition.

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!