#enfant ( hauteur de ligne : 200px; )

Cette méthode fonctionne dans tous les navigateurs, mais n'oubliez pas qu'elle doit être utilisée pour une ligne de texte. Si votre texte s'étend sur plus d'une ligne, utilisez une méthode différente. La valeur de la propriété line-height peut être n'importe quoi, mais pas inférieure à la hauteur de la police. En pratique, cette méthode est idéale pour centrer un menu horizontal.

Méthode CSS utilisant les propriétés de table

Comme je l'ai déjà écrit, le contenu des cellules peut être centré à l'aide de la propriété CSS vertical-align . L'élément parent doit être représenté sous forme de tableau, l'élément enfant doit être désigné comme une cellule et la propriété vertical-align avec la valeur middle qui lui est appliquée. De cette façon, tout contenu de l'élément enfant sera centré verticalement. Le code CSS est ci-dessous.

#parent ( display: table;) #child ( display: table-cell; vertical-align: middle; )

Malheureusement, cette méthode ne fonctionne pas dans les anciennes versions d'IE. Si vous avez besoin de la prise en charge d'IE6 et des versions antérieures, ajoutez une déclaration display: inline-block à l'élément enfant.

#enfant ( affichage : bloc en ligne ; )

Positionnement absolu et marge négative

Cette méthode concerne les éléments de niveau bloc et fonctionne dans tous les navigateurs. Vous devez définir la hauteur de l'élément à centrer.

Vous trouverez ci-dessous le code où l'élément enfant est centré à l'aide de la méthode donnée.

#parent (position : relative ;) #enfant ( position : absolue ; haut : 50 % ; gauche : 50 % ; hauteur : 30 % ; largeur : 50 % ; marge : -15 % 0 0 -25 %; )

La première étape consiste à positionner les éléments parent et enfant. Ensuite, nous définissons le décalage de l'élément enfant à 50 % par rapport au haut (haut) et au côté gauche (gauche) de l'élément parent, ainsi nous centrons l'élément enfant par rapport au parent. Cependant, nos manipulations mettront le coin supérieur droit de l'élément enfant au centre de l'élément parent, ce qui, bien sûr, ne nous convient pas.

Notre tâche consiste à déplacer l'élément enfant vers le haut et vers la gauche, par rapport à l'élément parent, de sorte que l'élément enfant soit visuellement centré verticalement et horizontalement. C'est pourquoi nous devons connaître la hauteur et la largeur de l'élément enfant.

Donc, nous devrions donner à l'élément enfant une marge supérieure et gauche négative égale à la moitié, respectivement, de la largeur et de la hauteur de l'élément enfant.

Contrairement aux deux premières méthodes, cette méthode concerne les éléments de niveau bloc. La méthode fonctionne dans tous les navigateurs, cependant, le contenu peut dépasser la hauteur de l'élément parent et aller au-delà. Cette méthode fonctionne mieux lorsque la hauteur et la largeur des éléments sont fixes.

Positionnement absolu d'un élément enfant

Comme dans la méthode précédente, les éléments parent et enfant sont positionnés respectivement de manière relative et absolue.

Dans le code CSS, je centre l'élément enfant à la fois verticalement et horizontalement, mais vous ne pouvez utiliser que le centrage vertical.

#parent (position : relative ;) #enfant ( position : absolu ; haut : 0 ; bas : 0 ; gauche : 0 ; droite : 0 ; largeur : 50 % ; hauteur : 30 % ; marge : automatique ; )

L'idée de cette méthode est que nous pouvons positionner l'élément enfant en utilisant les valeurs de propriété top , left , right , bottom égales à 0. Puisque notre élément enfant est plus petit que l'élément parent, il ne pourra pas " coller » à l'élément parent.

Les valeurs de marge pour les quatre côtés de l'élément enfant sont nulles, ce qui rend l'élément centré verticalement par rapport au parent. Malheureusement, cette méthode présente les mêmes inconvénients que la méthode précédente : il faut fixer la hauteur et la largeur de l'enfant, manque de support pour les anciens navigateurs IE.

Les marges inférieure et supérieure sont égales

Dans cette méthode, nous attribuons explicitement un remplissage égal (bas et haut) à l'élément parent, grâce auquel l'élément enfant est visuellement centré verticalement.

#parent ( rembourrage : 5% 0; ) #enfant ( rembourrage : 10% 0; )

J'utilise des tailles relatives. Si les tailles de bloc sont fixes, certains calculs mathématiques seront nécessaires.

Par exemple, si l'élément parent mesure 400 pixels de haut et que l'élément enfant mesure 100 pixels de haut, vous devez définir le rembourrage supérieur et inférieur sur 150 pixels.

150 + 150 + 100 = 400

div flottant

Cette méthode utilise une boîte flottante vide qui contrôle la position verticale de l'élément enfant. La div flottante doit être placée avant l'élément enfant, voir le code HTML ci-dessous.

#parent (hauteur : 250 px ;) #floater ( float : gauche ; hauteur : 50 % ; largeur : 100 % ; margin-bottom : -50 px ; ) #child ( clear : les deux ; hauteur : 100 px ; )

Nous déplaçons d'abord la boîte flottante vers la gauche (ou la droite) et lui donnons une hauteur de 50% de l'élément parent. De cette façon, le bloc flottant remplira la moitié supérieure de l'élément parent.

Étant donné que le bloc est flottant, il est supprimé du flux général du document. Par conséquent, le bloc enfant doit se voir attribuer la propriété clear avec une valeur à la fois . J'ai défini la valeur sur both , mais vous pouvez utiliser la valeur qui est la même que la direction de positionnement de l'élément flottant.

Maintenant, le bord supérieur de l'élément enfant se trouve directement sous le bord inférieur de l'élément flottant. Nous devons élever l'élément enfant de la moitié de la hauteur de l'élément flottant. Pour ce faire, il suffit de définir une marge inférieure négative égale à 50% pour le bloc flottant.

Fonctionne dans tous les navigateurs. L'inconvénient de cette méthode est qu'elle nécessite un bloc vide et doit connaître la hauteur de l'élément enfant.

Le problème du centrage vertical des éléments en CSS a un certain nombre de solutions toutes faites. Le choix de la méthode d'alignement dans chaque cas individuel dépend du type, de la taille, du positionnement des éléments et d'autres propriétés spécifiées par eux.

Vous trouverez ci-dessous les techniques d'alignement vertical populaires auprès des concepteurs de mise en page. Il montre comment ils fonctionnent et pour quels cas chacun d'eux est le plus approprié.

Voici deux éléments div :

Chaque méthode sera utilisée pour aligner l'unité intérieure sur le centre de l'unité extérieure.

hauteur de ligne pour une ligne

Lorsque le parent s'étend sur une ligne de texte et que la hauteur de l'enfant est connue, la propriété line-height peut être appliquée. La valeur de la propriété doit être égale à la hauteur de la boîte extérieure. Cela ne fonctionne que pour une ligne, il est donc bon que l'enfant ajoute overflow: hidden et white-space: nowrap pour empêcher le retour à la ligne.

Vous ne pourrez pas utiliser line-height=100% comme pourcentage, car 100% dans ce cas est la hauteur de la police.

Récipient(
hauteur : 300px ;
hauteur de ligne : 300px
}

Intérieur(
espace blanc : nowrap ;
débordement caché;
}

La méthode n'est applicable que lorsque la hauteur du bloc extérieur est connue.

Tableau avec alignement vertical

Un tableau est le meilleur moyen d'aligner les éléments verticalement. Afin de ne pas violer la sémantique, il est préférable de créer des éléments de table à l'aide de CSS. La position du contenu de la cellule est contrôlée par l'alignement vertical. Quatre valeurs de cette propriété fonctionnent dans des tables :

ligne de base - par défaut ;
. bas - contenu au bas de la cellule ;
. milieu - contenu au milieu de la cellule;
. top - contenu en haut de la cellule.

Dans le premier exemple, une seule cellule du tableau devient le bloc extérieur.

Récipient(
display:table-cell;
alignement vertical : milieu ;
}

La méthode est bonne car elle fonctionne pour des éléments sans hauteur spécifiée, mais dans certains cas, son utilisation est gênée par le fait que le bloc externe, comme toute cellule de tableau, ajuste sa largeur à son contenu, et vous ne pouvez l'étirer qu'en définissant la largeur pour la largeur explicitement. Pour une cellule sans tableau, les pourcentages ne fonctionnent pas correctement.

Ce défaut est corrigé en enveloppant la cellule dans le parent avec la propriété display:table. Cet élément peut être dimensionné en pourcentage. Le code final ressemblera à ceci :

Enveloppe extérieure (
affichage:tableau ;
}

Récipient(
display:table-cell;
alignement vertical : milieu ;
}

Position : absolue + marge négative

La méthode est utilisée lorsque la hauteur de l'élément intérieur est connue. Pour un bloc externe, il peut être inconnu. Le parent reçoit un positionnement relatif et l'enfant à l'intérieur est absolu.

Une valeur de propriété supérieure de 50 % entraîne le positionnement de l'élément imbriqué en haut au milieu de la boîte extérieure. Il reste à l'élever avec une marge supérieure négative de la moitié de sa propre hauteur pour qu'elle se trouve exactement au centre de la verticale.

Récipient(
position : relative ;
}

Intérieur(
hauteur : 140px ;
position : absolue ;
haut : 50 % ;
marge supérieure : -70px ;
}

L'inconvénient de cette méthode est la nécessité de connaître la taille de l'enfant.

Alignement en ligne avec alignement vertical

L'alignement des éléments inline et inline-block, y compris les images et les icônes, dans leur texte environnant est effectué avec la propriété vertical-align . Contrairement à une table, dans ce cas, l'ensemble de ses valeurs spécifiées dans la spécification fonctionne.

Compte tenu de la hauteur du parent, cette propriété peut être utilisée pour centrer un texte multiligne.

Pour le bloc extérieur, le centrage d'une ligne est prescrit.

Récipient(
hauteur : 140px ;
hauteur de ligne : 140px ;
}

La valeur de hauteur de ligne pour le bloc interne est remplacée par la valeur normale ou la valeur de votre choix. Il reçoit également l'alignement vertical-align: middle et la conversion en type inline-block - display: inline-block.

Intérieur(
affichage : bloc en ligne
hauteur de ligne : normale
alignement vertical : milieu ;
}

L'inconvénient de cette méthode est que vous devez connaître la taille du parent.

Alignement avec transformation

La fonction translateY de la propriété transform vous permet de centrer une boîte intérieure avec une hauteur inconnue. Pour cela, le parent doit être positionné de manière relative et l'enfant doit être positionné de manière absolue.

La propriété top avec une valeur de 50% abaisse la boîte intérieure de sorte que son bord supérieur soit au milieu du parent. La valeur translateY : -50 % élève l'élément de la moitié de sa propre hauteur et aligne ainsi les centres verticaux des boîtes.

Récipient(
position : relative ;
}

Intérieur(
position : absolue ;
haut : 50 % ;
transformer : translateY(-50 % );
}

L'inconvénient de la réception est le support limité des fonctions de transformation par le navigateur IE.

Alignement via pseudo-élément

La méthode fonctionne lorsque la hauteur est inconnue pour le premier ou le deuxième bloc. Un pseudo-élément en ligne inline-block est ajouté à l'intérieur du parent en utilisant before ou after . La hauteur de l'élément ajouté doit être égale à la hauteur du parent - hauteur : 100 %. L'alignement vertical du contenu est défini avec vertical-align: middle.

Vertical-align : middle aligne le bloc intérieur par rapport à ce pseudo-élément. Étant donné que le parent et l'enfant ont la même hauteur, l'élément intérieur, bien qu'aligné verticalement avec le pseudo-élément, est également centré avec la boîte extérieure.

Conteneur : avant (
contenu: "";
hauteur : 100 % ;
alignement vertical : milieu ;
affichage : bloc en ligne
}

Intérieur(
affichage : bloc en ligne
alignement vertical : milieu ;
}

Voie universelle. Ne fonctionne pas si le bloc intérieur est défini sur le positionnement absolu.

Boîte flexible

Le moyen le plus récent et le plus simple d'aligner des éléments verticalement. Flexbox vous permet d'organiser les éléments d'une page Web comme bon vous semble. Pour centrer un bloc, il suffit de définir le parent sur display : flex et l'enfant sur margin : auto.

Récipient(
affichage : flexible ;
largeur : 320px
hauteur : 140px ;
}

Intérieur(
largeur : 120px
marge : automatique ;
}

Flexbox ne fonctionne que dans les navigateurs modernes.

Choix de la méthode

La technique d'alignement vertical à utiliser dépend de la tâche et des limitations qui peuvent être présentes dans un cas particulier.

La hauteur des éléments est inconnue

Dans cette situation, vous pouvez utiliser l'une des quatre méthodes universelles :

1. Tableau. Le parent est une cellule de tableau créée en HTML ou via display-table/display-cell. Cet élément parent reçoit vertical-align: middle.

2. Pseudo-élément. Pour le bloc externe, un pseudo-élément inline-block est créé avec width=100% et vertical-align: middle. L'enfant reçoit display: inline-block et vertical-align: middle. La méthode ne fonctionne pas uniquement lorsque le bloc intérieur reçoit un positionnement absolu.

3. Transformez. Le parent obtient la position : relative. L'enfant reçoit la position : absolue, supérieure : 50 % et transformée : translateY(-50 %) ;

4 Boîte flexible. Le bloc extérieur est réglé sur display: flex, le bloc intérieur est réglé sur margin: auto.

Seule la taille de l'enfant est connue

Le bloc extérieur est positionné relativement ; l'élément intérieur reçoit un positionnement absolu, haut : 50% et une marge-haut égale à la moitié de sa hauteur.

Une ligne par bloc avec une hauteur connue

La boîte extérieure est définie sur la propriété line-height avec une valeur égale à sa hauteur.

La hauteur du bloc extérieur est connue, mais pas celle de l'élément intérieur.

Le parent reçoit une hauteur de ligne égale à sa hauteur. La hauteur de ligne de l'enfant est redéfinie à normal ou à la valeur de votre choix, et on lui donne display: inline-block et vertical-align: middle.

L'alignement des éléments horizontalement et verticalement peut se faire de différentes manières. Le choix de la méthode dépend du type d'élément (bloc ou inline), du type de son positionnement, de sa taille, etc.

1. Alignement horizontal au centre du bloc / page

1.1. Si le bloc a une largeur :

div ( width: 300px; margin: 0 auto; /*centrer l'élément horizontalement dans le bloc parent*/ )

Si vous souhaitez aligner un élément en ligne de cette façon, vous devez le définir pour afficher : block;

1.2. Si un bloc est imbriqué dans un autre bloc et qu'aucune largeur n'est définie pour lui :

.wrapper(text-align:center;)

1.3. Si le bloc a une largeur et doit être fixé au centre du bloc parent :

.wrapper (position : relative ; /* définit la boîte parente sur une position relative afin que nous puissions absolument positionner la boîte à l'intérieur plus tard*/) .box ( largeur : 400px ; position : absolue ; gauche : 50 % ; margin-left : 200px; / *décaler le bloc vers la gauche d'une distance égale à la moitié de sa largeur*/ )

1.4. Si aucune largeur n'est définie pour les blocs, vous pouvez centrer à l'aide du bloc wrapper parent :

.wrapper (text-align: center; /*center the content of the block*/) indent between blocks*/ )

2. Alignement vertical

2.1. Si le texte occupe une ligne, par exemple, pour les boutons et les éléments de menu :

.button (hauteur : 50 px ; hauteur de ligne : 50 px ; )

2.2. Pour aligner un bloc verticalement à l'intérieur du bloc parent :

.wrapper (position : relative ;) .box ( hauteur : 100 px ; position : absolue ; haut : 50 % ; marge : -50px 0 0 0; )

2.3. Alignement vertical par type de table :

.wrapper ( affichage : tableau ; largeur : 100 % ; )

2.4. Si la boîte a une largeur et une hauteur définies et doit être centrée sur la boîte parent :

.wrapper ( position : relative ; ) .box ( hauteur : 100 pixels ; largeur : 100 pixels ; position : absolue ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; marge : auto ; débordement : auto ; /*to le contenu ne s'est pas propagé */ )

2.5. Positionnement absolu au centre de la page/du bloc à l'aide de la transformation CSS3 :

si l'élément a des dimensions

div ( largeur : 300 px ; /*définir la largeur du bloc*/ hauteur : 100 px ; /*définir la hauteur du bloc*/ transformer : traduire (-50 %, -50 %) ); position : absolu ; haut : 50 % ; gauche : 50% ; )

si l'élément n'a pas de dimensions et n'est pas vide

h1 ( marge : 0 ; transformation : translation(-50 %, -50 %); position : absolue ; haut : 50 % ; gauche : 50 % ; )

CSS,

HTML

Je pense que beaucoup d'entre vous qui ont effectué des travaux de mise en page ont rencontré le besoin d'aligner des éléments verticalement et savent quelles difficultés surviennent lors de l'alignement d'un élément au centre.

Oui, pour l'alignement vertical en CSS, il existe une propriété spéciale d'alignement vertical avec de nombreuses valeurs. Cependant, dans la pratique, cela ne fonctionne pas comme prévu. Essayons de comprendre cela.

Comparons les approches suivantes. Alignement avec :

• les tables,
• échancrure,
• hauteur de la ligne ,
• élongation,
• marge négative,
• transformer ,
• pseudo-élément
• boîte flexible.

A titre d'illustration, considérons l'exemple suivant.

Il y a deux éléments div, l'un imbriqué dans l'autre. Donnons-leur les classes appropriées - outer et inner .

Le but est d'aligner l'élément intérieur au centre de l'élément extérieur.

Pour commencer, considérons le cas où les tailles des blocs extérieur et intérieur connu. Ajoutons display: inline-block à l'élément interne, et text-align: center et vertical-align: middle à l'élément externe.

N'oubliez pas que l'alignement ne s'applique qu'aux éléments qui ont le mode d'affichage inline ou inline-block.

Définissons les tailles des blocs, ainsi que les couleurs de fond pour voir leurs bordures.

Outer ( largeur : 200px ; hauteur : 200px ; text-align : centre ; vertical-align : milieu ; background-color : #ffc ; ) .inner ( display : inline-block ; largeur : 100px ; hauteur : 100px ; background-color : #fcc; )
Après avoir appliqué les styles, nous verrons que le bloc intérieur est aligné horizontalement, mais pas verticalement :
http://jsfiddle.net/c1bgfffq/

Pourquoi est-ce arrivé? Le fait est que la propriété d'alignement vertical affecte l'alignement l'élément lui-même, pas son contenu(sauf lorsqu'il est appliqué aux cellules d'un tableau). Par conséquent, l'application de cette propriété à l'élément extérieur n'a rien fait. De plus, appliquer cette propriété à l'élément interne ne fera rien non plus, puisque les blocs en ligne sont alignés verticalement avec les blocs voisins, et dans notre cas, nous avons un bloc en ligne.

Il existe plusieurs techniques pour résoudre ce problème. Examinons de plus près chacun d'eux ci-dessous.

Alignement avec un tableau

La première solution qui vient à l'esprit est de remplacer le bloc extérieur par une table unicellulaire. Dans ce cas, l'alignement sera appliqué au contenu de la cellule, c'est-à-dire au bloc intérieur.

http://jsfiddle.net/c1bgfffq/1/

L'inconvénient évident de cette solution est que du point de vue de la sémantique, il est erroné d'utiliser des tables pour l'alignement. Le deuxième inconvénient est que pour créer un tableau, vous devez ajouter un élément supplémentaire autour du bloc extérieur.

Le premier moins peut être partiellement supprimé en remplaçant les balises table et td par div et en définissant le mode d'affichage de la table dans CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Néanmoins, le bloc extérieur restera toujours une table avec toutes les conséquences qui en découlent.

Alignement avec rembourrage

Si les hauteurs des blocs intérieur et extérieur sont connues, l'alignement peut être défini à l'aide du rembourrage vertical du bloc intérieur, à l'aide de la formule : (H extérieur - H intérieur) / 2.

Extérieur (hauteur : 200 px ; ) .intérieur (hauteur : 100 px ; marge : 50 px 0 ; )
http://jsfiddle.net/c1bgfffq/6/

L'inconvénient de la solution est qu'elle n'est applicable que dans un nombre limité de cas lorsque les hauteurs des deux blocs sont connues.

Alignement avec la hauteur de ligne

Si vous savez que le bloc intérieur ne doit pas occuper plus d'une ligne de texte, vous pouvez utiliser la propriété line-height et la définir égale à la hauteur du bloc extérieur. Étant donné que le contenu du bloc interne ne doit pas s'étendre jusqu'à la deuxième ligne, il est recommandé d'ajouter également les règles white-space : nowrap et overflow : hidden.

Outer (hauteur : 200 px ; hauteur de ligne : 200 px ; ).
http://jsfiddle.net/c1bgfffq/12/

Cette technique peut également être utilisée pour aligner du texte multiligne si vous remplacez la valeur de hauteur de ligne pour le bloc intérieur et ajoutez les règles display: inline-block et vertical-align: middle .

Outer (hauteur : 200 px ; hauteur de ligne : 200 px ; ).
http://jsfiddle.net/c1bgfffq/15/

L'inconvénient de cette méthode est que la hauteur du bloc extérieur doit être connue.

Alignement d'étirement

Cette méthode peut être utilisée lorsque la hauteur du bloc extérieur est inconnue, mais que la hauteur du bloc intérieur est connue.

Pour cela, vous avez besoin de :

1. définir le positionnement relatif par rapport au bloc extérieur et le positionnement absolu par rapport au bloc intérieur ;
2. ajoutez les règles top : 0 et bottom : 0 au bloc intérieur, à la suite de quoi il s'étendra sur toute la hauteur du bloc extérieur ;
3. définissez la valeur sur auto pour le remplissage vertical du bloc intérieur.

.outer ( position : relative ; ) .inner ( hauteur : 100 pixels ; position : absolue ; haut : 0 ; bas : 0 ; marge : auto 0 ; )
http://jsfiddle.net/c1bgfffq/4/

L'essence de cette technique est que la définition d'une hauteur pour un bloc étiré et en position absolue oblige le navigateur à calculer le remplissage vertical dans des proportions égales si leur valeur est définie sur auto .

Alignement avec marge négative en haut

Cette méthode est devenue largement connue et est très souvent utilisée. Comme le précédent, il est appliqué lorsque la hauteur du bloc extérieur est inconnue, mais la hauteur du bloc intérieur est connue.

Vous devez définir le bloc extérieur sur le positionnement relatif et le bloc intérieur sur le positionnement absolu. Vous devez ensuite déplacer la boîte intérieure vers le bas de la moitié de la hauteur du haut de la boîte extérieure : 50 % et la déplacer vers le haut de la moitié de sa propre hauteur margin-top : -H intérieur / 2.

Outer ( position : relative ; ) .inner ( hauteur : 100 px ; position : absolue ; haut : 50 % ; marge-haut : -50 px ; )
http://jsfiddle.net/c1bgfffq/13/

L'inconvénient de cette méthode est que la hauteur de l'unité intérieure doit être connue.

Alignement avec transformation

Cette méthode est similaire à la précédente, mais elle peut être appliquée lorsque la hauteur du bloc intérieur est inconnue. Dans ce cas, au lieu de définir un remplissage négatif en pixels, vous pouvez utiliser la propriété transform et soulever la boîte intérieure avec la fonction translateY et une valeur de -50% .

Outer ( position : relatif ; ) .inner ( position : absolu ; haut : 50 % ; transformation : translateY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Pourquoi dans la méthode précédente, il était impossible de définir la valeur en pourcentage ? Étant donné que les valeurs en pourcentage de la propriété margin sont relatives à l'élément parent, une valeur de 50 % serait égale à la moitié de la hauteur de la boîte extérieure et nous aurions besoin d'élever la boîte intérieure de la moitié de sa propre hauteur. C'est exactement à cela que sert la propriété transform.

L'inconvénient de cette méthode est qu'elle ne peut pas être appliquée si le bloc interne a un positionnement absolu.

Alignement avec Flexbox

La façon la plus moderne d'aligner verticalement consiste à utiliser la disposition de boîte flexible (communément appelée Flexbox). Ce module vous permet de contrôler de manière flexible le positionnement des éléments sur la page, en les plaçant presque n'importe où. L'alignement central pour Flexbox est une tâche très simple.

Le bloc externe doit être défini sur display: flex , et le bloc interne doit être défini sur margin: auto . Et c'est tout ! C'est beau, n'est-ce pas?

Outer ( display : flex; width: 200px; height: 200px; ) .inner ( width: 100px; margin: auto; )
http://jsfiddle.net/c1bgfffq/14/

L'inconvénient de cette méthode est que Flexbox n'est pris en charge que par les navigateurs modernes.

Quelle voie choisir ?

Il faut partir de l'énoncé du problème :

• Pour l'alignement vertical du texte, il est préférable d'utiliser le remplissage vertical ou la propriété line-height.
• Pour les éléments absolument positionnés avec une hauteur connue (comme les icônes), une approche marge-haut négative est idéale.
• Pour les cas plus complexes où la hauteur du bloc est inconnue, un pseudo-élément ou la propriété transform doit être utilisé.
• Eh bien, si vous avez la chance de ne pas avoir à prendre en charge les anciennes versions d'IE, Flexbox est bien sûr préférable.