Utilisez des valeurs de marge négatives​​en CSS pour ajuster la position centrale

C'est peut-être la méthode de centrage la plus couramment utilisée. Si vous connaissez la taille de chaque élément, définissez une valeur de marge négative égale à la moitié de la largeur et de la hauteur (si vous n'utilisez pas le style box-sizing: border-box, vous devez également ajouter une valeur de remplissage), puis faites correspondre top : 50 % ; gauche : 50 % ; le style centrera l'élément de bloc.

Il est à noter que c'est la seule façon de travailler sous IE6-7 comme prévu.

Code CSSCopier le contenu dans le presse-papiers

.is-Negative {       
        width: 300px;       
        height: 200px;       
        padding: 20px;       
        position: absolute;       
        top: 50%; left: 50%;       
        margin-left: -170px; /* (width + padding)/2 */      
        margin-top: -120px; /* (height + padding)/2 */      
}

Avantages :

La compatibilité avec les navigateurs est très bonne, prend même en charge IE6-7
Peu de codage requis

Remarquez également :

Ceci est une méthode non réactive, vous ne pouvez pas utiliser la taille en pourcentage, ni définir les valeurs maximales et minimales de min-/max-.
Le contenu peut dépasser le conteneur
L'espace doit être réservé pour le remplissage ou le dimensionnement de la boîte : le style bordure-boîte doit être utilisé.

Pour plus d'articles sur l'utilisation de valeurs de marge négatives en CSS pour ajuster la position centrale, veuillez faire attention au site Web PHP chinois !