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

L'énigme du centrage vertical avec "margin: auto"

Dans le monde du CSS, la propriété "margin: auto" est un outil populaire pour centrer horizontalement les éléments. Cependant, lorsqu'il s'agit d'alignement vertical, il est souvent insuffisant.

Comme le montre l'exemple fourni, un div bleu avec "margin: auto" est centré horizontalement sans effort, mais reste non ajusté verticalement. La raison réside dans les spécifications de CSS2.1 (section 10.6.2).

Dans les dispositions en blocs, les éléments sont empilés verticalement et les marges peuvent s'effondrer. Pour une boîte de bloc autonome avec une hauteur automatique et un parent bordé, les marges sont naturellement remises à zéro. Cependant, lorsque plusieurs boîtes de blocs sont introduites ou que des éléments supplémentaires ont un impact sur la disposition (par exemple, le dégagement), les marges automatiques deviennent ambiguës et nécessitent une résolution plus approfondie.

De même, les éléments en ligne (y compris les lignes atomiques) et les flotteurs ne peuvent pas se centrer verticalement avec l'auto. marges en raison de leurs règles de mise en page spécifiques. Cependant, les boîtes positionnées de manière absolue n'ont pas de telles limitations car elles ne sont pas affectées par d'autres éléments dans leur contexte de positionnement. Flexbox, en revanche, propose une approche différente de la mise en page, permettant de calculer les marges automatiques des éléments flexibles par rapport au conteneur flexible en raison de leur connaissance inhérente des autres éléments flexibles.

Par conséquent, tandis que " margin: auto" centre efficacement les éléments horizontalement, mais ne parvient pas à centrer verticalement en raison de la complexité de la disposition des blocs et des ambiguïtés qui surviennent lorsque plusieurs éléments sont impliqués.

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!