Pourquoi \"margin: auto\" ne centre-t-il pas les éléments verticalement en HTML ?

Centrer les éléments verticalement avec "margin: auto"

Le problème :

En HTML, appliquer "margin: auto" " à un élément le centre généralement horizontalement dans son conteneur. Cependant, pourquoi ne se comporte-t-il pas de la même manière verticalement ?

Explication :

Selon les spécifications CSS (section 10.6.2 de CSS2.1), block- les éléments de niveau (par exemple, divs) sont positionnés verticalement de haut en bas sans centrage automatique. En effet, les marges verticales peuvent s'effondrer dans certaines conditions (par exemple, bordure sur l'élément parent).

Dans un scénario où un seul élément de niveau bloc avec marges automatiques existe dans un conteneur avec une hauteur automatique, son sommet et les marges inférieures deviennent nulles de toute façon. Cependant, lorsque plusieurs éléments au niveau du bloc ou des boîtes hors flux (par exemple, dégagement) sont présents, le comportement des marges automatiques devient ambigu, nécessitant un contrôle manuel.

Éléments et flotteurs en ligne :

Pour les éléments en ligne (y compris les inlines atomiques) et les flotteurs, les marges gauche et droite automatiques sont également remises à zéro. En effet, les boîtes de niveau en ligne sont disposées le long des boîtes de ligne et les flottants suivent des règles de disposition uniques.

Boîtes à position absolue :

Les marges automatiques se comportent différemment pour les zones à position absolue. boîtes. Puisqu'ils sont indépendants des autres éléments dans le même contexte de positionnement, ils peuvent être centrés verticalement à l'aide des marges supérieures et inférieures automatiques.

Flexbox :

Dans Flexbox, les marges automatiques comportez-vous encore une fois différemment. Les éléments flexibles connaissent les uns les autres, y compris leur présence ou leur absence. Cela permet un contrôle plus précis du comportement de la marge, y compris le centrage vertical.

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!