Comment centrer horizontalement et verticalement un élément à position fixe ?

Comment centrer une position : élément fixe

Problème :

Centrer une "position : fixe ;" boîte contextuelle horizontalement et verticalement avec une largeur et une hauteur dynamiques, malgré l'utilisation de margin : 5% auto ;

Solution :

Il existe plusieurs approches pour y parvenir :

Approche 1 : largeur et hauteur fixes

1. Définir en haut et à gauche à 50 % pour centrer le coin supérieur gauche du div.
2. Réglez margin-top et margin-left sur la moitié négative de la hauteur et de la largeur du div pour déplacer le centre vers le milieu.

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height */
margin-left: -250px; /* Negative half of width */

Approche 2 : Largeur et/ou hauteur dynamiques

1. Utiliser la transformation au lieu de la marge, en la définissant 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%);

Approche 3 : largeur fixe, mais ne vous souciez pas du centrage vertical

1. Ajoutez left: 0 et right: 0 à l'élément, tout en définissant margin-left et margin-right sur auto.

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

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!