Comment centrer un `` élément sur l'écran en utilisant CSS ?

Comment positionner un <div> Élément au centre de l'écran à l'aide de CSS

Centraliser le placement d'un élément <div> Un élément sur une page Web, quelle que soit la résolution de l'écran, nécessite un style CSS soigné. L'objectif est d'assurer un espacement égal de tous les côtés : haut, bas, gauche et droite.

Méthode 1 : Positionnement absolu avec des dimensions fixes

Pour les éléments avec des dimensions prédéterminées largeur et hauteur, la solution la plus simple est le positionnement absolu :

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

• Cette méthode définit la position de l'élément à 50 % de la hauteur et la largeur de l'écran, en le plaçant au centre.
• Les marges négatives de la moitié de la hauteur et de la largeur de l'élément décalent sa position de la quantité correcte, assurant un espacement égal de tous les côtés.

Exemple :

<div>

Méthode 2 : Transformation CSS Propriété

Pour les éléments avec dimensionnement dynamique, la propriété CSS transform peut être utilisée :

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

• Cette méthode applique une transformation de traduction à l'élément, en le décalant de moitié sa largeur et sa hauteur dans le sens horizontal et vertical.
• L'élément reste positionné à 50% de la hauteur et de la largeur de l'écran, mais il est correctement décalé du fait du transformation.

Remarque :

• Les deux méthodes garantissent que l'élément est centré et ne défilera pas avec le contenu de la page.
• Il est recommandé d'utiliser un navigateur moderne pour une compatibilité optimale avec ces techniques CSS.

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!