Comment centrer un élément « position:fixed » avec des dimensions dynamiques ?

Centrage d'un élément Positioned:fixed avec des dimensions dynamiques

Lors de l'utilisation de position:fixed pour créer une boîte contextuelle qui doit être centrée sur l'écran , le centrage horizontal et vertical peut présenter un défi. C'est parce que margin:5% auto; aligne l'élément uniquement horizontalement.

Pour obtenir l'alignement souhaité, les stratégies séquenti peuvent être utilisées :

Méthode 1 : largeur et hauteur connues

Si la largeur et la hauteur du div sont connues, les propriétés top et left peuvent être définies sur 50 %. De plus, la marge supérieure et la marge gauche doivent être définies sur la moitié négative des dimensions respectives du div pour déplacer le centre vers le milieu.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;

Méthode 2 : largeur et hauteur dynamiques

Si les dimensions du div sont dynamiques, la propriété transform peut être utilisée à la place des marges. La transformation est définie sur la moitié négative de la largeur et de la hauteur relatives du div.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Méthode 3 : largeur fixe et alignement vertical indéterminé

Si la largeur du div est fixe et l'alignement vertical n'est pas critique, left:0 et right:0 peuvent être ajoutés à l'élément avec margin-left et margin-right de auto.

position: fixed;
width: 500px;
margin: 5% auto; /* Only centers horizontally not vertically! */
left: 0;
right: 0;

En implémentant ces méthodes, vous pouvez centrer un élément position:fixed avec des dimensions dynamiques sur l'écran, en vous assurant qu'il reste fixe quelle que soit la taille de la fenêtre.

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!