Explication détaillée de la solution de centrage vertical en HTML5

En CSS, vous devez vous plaindre. Vous pouvez utiliser margin: 0 auto; pour réaliser un centrage horizontal, mais margin: auto 0 ne peut pas réaliser un centrage vertical.

La raison principale ici est que le contrôle parent, c'est-à-dire le contrôle lui-même, n'est pas positionné correctement. En regardant directement le code, vous devez d'abord utiliser la disposition relative pour le contrôle parent, puis vous devez utiliser la disposition absolue pour les contrôles enfants, et utiliser les attributs top et bottom, combinés avec margin: auto 0;, pour atteindre l'objectif. effet.

 .container-vertical { position : relative ; largeur : 100 % ; hauteur : 200 px ; arrière-plan : bleu ciel profond ; marge-bas : 20 px ;} .container-vertical-item { position : largeur : 130 px ; aligner : centre ; arrière-plan : jaune ; hauteur de ligne : 80 px ; haut : 0 ; marge : auto. 0 ;}

Centré verticalement.png

Avec l'expérience de la version 5.2, nous pouvons essayer de définir les propriétés left, right, top et bottom du contrôle enfant sur 0, et margin : auto ; Cet effet peut être obtenu. Les sous-contrôles qui doivent être notés doivent avoir l'attribut display: block;

Regarde le code

 .container-horization-vertical { position : relative ; largeur : 100 % ; hauteur : 200 px ; arrière-plan : bleu ciel profond ; marge-bas : 20 px ;} .container-horization-vertical-item { position : largeur absolue : 150 px ; 80px ; arrière-plan : jaune ; hauteur de ligne : 80px ; alignement du texte : haut : 0 ; 0 ; bas : 0 ; droite : 0 ; marge : auto ;}

Résumé : Cette solution est toujours très efficace pour résoudre certaines mises en page pas si complexes et peut être adaptée à n'importe quelle interface et presque tous les navigateurs. Mais pour des pages très complexes, d’autres solutions peuvent être nécessaires, mais vous pouvez aussi vous inspirer de cette idée.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.