Comment centrer une division à position fixe à l'aide de CSS ?

Centrer un div à position fixe

Lorsque vous travaillez avec des divs à position fixe, les aligner au centre de la page peut être un défi. Le "hack" traditionnel utilisé pour les éléments positionnés de manière absolue ne s'applique pas. Au lieu de cela, le coin le plus à gauche du div est placé à 50 %, en ignorant la marge gauche.

Solution utilisant la transformation CSS3

La solution réside dans l'utilisation de la propriété de transformation CSS3 :

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

Cette méthode utilise la propriété transform pour décaler l'élément vers la gauche de la moitié de sa largeur, le centrant ainsi sur le page.

Bonus : Centrage des éléments en position absolue

Pour les éléments en position absolue, une meilleure méthode que le "hack" en marge gauche consiste à utiliser la flexbox CSS3 :

.centered {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

Cela aligne le contenu de l'élément positionné de manière absolue sur le center.

Exemple

Voici un exemple pour démontrer la différence :

<div class="almost-centered">I'm almost centered DIV lorem ipmsum</div>

<div class="centered">I'm exactly centered DIV using CSS3</div>

Le div "presque centré" utilise le "hack" de marge gauche, tandis que le Le div "centré" utilise la propriété de transformation CSS3. Comme vous pouvez le voir, le div « centré » est positionné avec précision au centre.

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!