Résumé de 7 façons de centrer verticalement les divs

Dans notre développement Web quotidien, nous utilisons souvent CSS et DIV pour la mise en page afin de rendre la page plus belle et d'offrir une meilleure expérience. Alors, comment faire en sorte que le div s'affiche de différentes manières centrées ? Ci-dessous, nous expliquerons la méthode de ? centrer verticalement les divs en détail.

Comment centrer verticalement des divs à l'aide de CSS :

1.Tutoriel CSS : Plusieurs méthodes pour centrer verticalement des divs

Quand on parle de ce problème, certaines personnes peuvent se demander : n'y a-t-il pas un attribut d'alignement vertical en CSS pour définir le centrage vertical ? Même si certains navigateurs ne le supportent pas, il me suffit de faire un peu de technologie CSS Hack ! Je dois donc dire quelques mots ici. Il existe effectivement un attribut d'alignement vertical en CSS, mais il ne prend effet que sur les éléments avec des attributs valign dans les éléments (X)HTML, tels que

, , , etc. Des éléments comme

, n'ont pas d'attributs valign, donc l'utilisation de l'alignement vertical ne fonctionnera pas sur eux.

2.Analyse d'exemple de méthode de centrage vertical de texte CSS et div

Dans la mise en page de style, nous rencontrent souvent le besoin de centrer les éléments. Il est relativement simple de réaliser un centrage horizontal des éléments via CSS : pour le texte, il vous suffit de définir text-align: center; pour son élément parent, et pour les éléments au niveau du bloc tels que p, il vous suffit de définir les valeurs de marge. ​​​​de sa gauche et de sa droite sur auto. Pour réaliser un centrage vertical des éléments, certaines personnes penseront à l'attribut vertical-align en CSS, mais il ne prend effet que sur les éléments avec des attributs valign, tels que

, , , etc. dans les éléments de table. et les éléments comme

et n'ont pas l'attribut valign, donc l'utilisation de vertical-align ne fonctionnera pas sur eux. Par conséquent, nous devons utiliser d'autres méthodes pour réaliser le centrage vertical des éléments. Ci-dessous, j'ai résumé plusieurs méthodes de centrage vertical couramment utilisées.

3.[Frontstage] contrôle css centrage vertical DIV

Parce qu'à ce moment, le navigateur utilisera la position indiquée comme le point vert dans l’image. L’emplacement par défaut. Pour centrer le contenu, définissez respectivement margin-left et margin-top sur demi-largeur et demi-largeur négatives.

2. Centrez le div horizontalement et verticalement :

1. Utilisez CSS pour réaliser le centrage horizontal et vertical des divs

Il existe de nombreuses solutions pour réaliser le centrage. Cet article présente principalement la solution du pur. CSS utilisant Absolute avec margin , margin-top est -(hauteur / 2), margin-left est -(width / 2). Bien sûr, vous ne pouvez pas utiliser margin, c'est-à-dire que top est calc(100% - height) / 2, left est calc(100% - width) / 2, mais il est recommandé de ne pas utiliser calc() si vous le pouvez.

2.css pour réaliser le centrage horizontal et vertical du DIV sur l'écran

css comment réaliser le centrage horizontal et vertical en plein écran de p. Ce chapitre présente comment un élément p obtient l'effet de centrage horizontal et vertical dans l'ensemble de la page Web. Le code est le plus convaincant.

Questions et réponses connexes sur le centrage vertical div :

1.css3 - Comment centrer le contenu dans un div horizontalement et verticalement ?

2.css - Comment centrer div horizontalement et verticalement dans le navigateur mobile UC ?

【div relatif au centrage vertical Article】

1. Centrage de l'image CSS : centrage de l'image CSS vers le haut, le bas, la gauche et la droite (centrée horizontalement et verticalement)

Centrage 2.div : le résumé le plus complet des méthodes de centrage div

3. Centrage CSS : La collection la plus complète de méthodes de centrage CSS

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!