Comment centrer parfaitement des Divs fixes et positionnés absolument ?

Fixation de l'alignement central pour les divs à position fixe

L'alignement central d'un div à position fixe peut poser un défi en utilisant des méthodes traditionnelles pour des éléments positionnés de manière absolue. Le "hack" consistant à définir la propriété left à 50 % et la marge gauche à la moitié de la largeur du div échoue pour les divs à position fixe.

Pour résoudre ce problème et obtenir un centrage précis, une meilleure solution consiste à utiliser le CSS3. transformer la propriété. Même sans définir de largeur explicite, cette méthode positionne efficacement le div au centre :

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

Cette solution aligne le centre du div avec le centre de la fenêtre, garantissant qu'il reste centré même lorsque la fenêtre du navigateur est redimensionnée. . De plus, la propriété transform est largement prise en charge par les navigateurs modernes.

Bonus : alignement central amélioré pour les éléments en position absolue

Pour les éléments en position absolue, l'utilisation de l'approche suivante offre une méthode de centrage plus précise et polyvalente :

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

Ici, l'élément est positionné et aligné de manière absolue en transformant sa position en fonction de sa propre hauteur et la largeur. Cette méthode permet un centrage précis sans aucun ajustement de marge requis.

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!