Comment puis-je centrer avec précision des Divs fixes et positionnés en absolu avec CSS ?

Réaliser un alignement précis pour une division à position fixe

Centrer des éléments à position fixe peut être un défi, surtout après avoir rencontré les limites de l'astuce de la "marge demi-largeur" ​​pour absolument éléments positionnés. Heureusement, CSS3 fournit une solution à ce problème.

Solution pour un div à position fixe :

Pour aligner un div à position fixe de manière centralisée, utilisez la propriété transform :

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

Cette méthode déplace efficacement la position du div de son coin le plus à gauche vers son centre.

Alignement de position absolue amélioré :

En essayant de centrer des divs en position absolue, une meilleure approche existe :

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

En utilisant ceci méthode, les divs sont centrés à la fois horizontalement et verticalement, quelle que soit leur taille ou leur positionnement supérieur.

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!