Tableau détaillé des avantages et des inconvénients de la technologie de positionnement et de centrage absolu CSS

Technologie de centrage absolu

Nous utilisons souvent margin:0 auto pour réaliser un centrage horizontal, mais nous avons toujours pensé que margin:auto ne pouvait pas réaliser un centrage vertical... En fait, pour réaliser un centrage vertical centrage, il vous suffit de déclarer la hauteur de l'élément et le CSS suivant :

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Avantages :

1. Prend en charge tous les navigateurs, y compris IE8-IE10.

2. Aucune autre balise spéciale n'est nécessaire et la quantité de code CSS est faible

3. Prend en charge la valeur de l'attribut pourcentage% et les attributs min/max

4. réaliser le centrage de n'importe quel bloc de contenu

5. Il peut être centré indépendamment du fait que le remplissage soit défini (sans utiliser l'attribut box-sizing)

6.

7. Prend parfaitement en charge le centrage de l'image.

Inconvénients :

1. La hauteur doit être déclarée (voir Hauteur variable).

2. Il est recommandé de définir overflow:auto pour empêcher le contenu de déborder hors des limites. (Voir Débordement).

3. Ne fonctionne pas sur les appareils Windows Phone.

Compatibilité des navigateurs :

Chrome, Firefox, Safari, Mobile Safari, IE8-10.

La méthode de positionnement absolu fonctionne dans la dernière version de Chrome, Firefox, Safari, Mobile Le test a réussi sur Safari, IE8-10.

Tableau comparatif :

La méthode de centrage absolu n'est pas la seule méthode de mise en œuvre. Il existe d'autres méthodes pour réaliser un centrage vertical, et chacune a ses propres avantages. La technologie utilisée dépend de la prise en charge de votre navigateur et des balises de langue que vous utilisez. Ce tableau comparatif vous aidera à faire le bon choix en fonction de vos besoins.

Technique	Support du navigateur	Réactif	Débordement	redimensionner : les deux	Hauteur variable	Mises en garde majeures
Centrage absolu	Moderne et IE8+	Oui	Défilement, peut déborder du conteneur	Oui	Oui*	Hauteur variable pas parfait multi-navigateur
Marges négatives	Tous	Non	Défilement	Redimensionne mais ne reste pas centré	Non	Non responsive, les marges doivent être calculées manuellement
Transformations	Moderne et IE9+	Oui	Défilement, peut déborder du conteneur	Oui	Oui	Rendu flou
Table-Cell	Moderne et IE8+	Oui	Agrandit le conteneur	Non	Oui	Marquage supplémentaire
Bloc en ligne	Moderne, IE8+ et IE7*	Oui	Agrandit le conteneur	Non	Oui	Nécessite un conteneur, des styles hacky
Flexbox	Moderne et IE10+	Oui	Défiler, peut conteneur de trop-plein	Oui	Oui	Nécessite un conteneur et des préfixes de fournisseur

解释：

通过以上描述，绝对居中（AbsoluteCentering ）的工作机理可以阐述如下：

1、在普通内容流（flux de contenu normal）中，margin:auto的效果等同于margin-top:0;margin-bottom:0。

W3C中写道Si 'margin-top' ou 'margin-bottom' sont 'auto', leur valeur utilisée est 0.

2、position:absolute使绝对定位块跳出了内容流，

Developer.mozilla.org :...un élément positionné de manière absolue est retiré du flux et est donc pris sans espace

3、为块区域设置top : 0 ; gauche : 0 ; bas : 0 ; à droite : 0 ;为body或者声明为position:relative;的容器。

Developer.mozilla.org : Pour les éléments positionnés de manière absolue, les propriétés haut, droite, bas et gauche spécifient des décalages. à partir du bord du bloc contenant l'élément (à quoi l'élément est positionné par rapport).

4、 空间，促使浏览器根据新的边界框重新计算margin:auto

Developer.mozilla.org : La marge de l'élément [absolument positionné] est ensuite positionnée à l'intérieur de ces décalages.

5、由于内容块被绝对使元素块在先前定义的边界内居中。

W3.org : Si aucun des trois [haut, bas, hauteur] sont 'auto' : si 'marge-haut' et 'marge-bas' sont 'auto', résolvez le équation sous la contrainte supplémentaire que les deux marges obtiennent des valeurs égales.AKA : centrer le bloc verticalement Centrage)中渲染，因此margin:auto可以使内容在通过top: 0 ; gauche : 0 ; en bas : 0 ; à droite : 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!