Comment s'aligner verticalement au centre du contenu d'un div avec une largeur / hauteur définie?

Quelle serait la méthode correcte pour centrer verticalement tout contenu dans une largeur / hauteur définie div.

Dans l' exemple, il y a deux contenus avec des hauteurs différentes, quelle est la meilleure façon de centrer verticalement les deux en utilisant la classe .content. (et cela fonctionne pour tous les navigateurs et sans la solution de table-cell)

Ayez quelques solutions en tête, mais aimeriez connaître d'autres idées, l'une utilise position:absolute; top:0; bottom: 0;et margin auto.

J'ai fait un peu de recherche et d'après ce que j'ai trouvé, vous avez quatre options:

Version 1: div parent avec affichage sous forme de cellule de tableau

Si cela ne vous dérange pas d'utiliser le display:table-cellsur votre div parent, vous pouvez utiliser les options suivantes:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

DÉMO en direct

Version 2: div parent avec bloc d'affichage et cellule-table d'affichage de contenu

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

DÉMO en direct

Version 3: div parent flottant et div contenu comme cellule de tableau d'affichage

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

DÉMO en direct

Version 4: position div parent relative avec position du contenu absolue

Le seul problème que j'ai eu avec cette version est qu'il semble que vous devrez créer le css pour chaque implémentation spécifique. La raison en est que le contenu div doit avoir la hauteur définie que votre texte remplira et que le haut de la marge en sera déduit. Ce problème peut être vu dans la démo. Vous pouvez le faire fonctionner pour chaque scénario manuellement en modifiant le pourcentage de hauteur de votre div de contenu et en le multipliant par -,5 pour obtenir la valeur de votre marge supérieure.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

DÉMO en direct

Cela pourrait également être fait en utilisant display: flexseulement quelques lignes de code. Voici un exemple:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Démo en direct

J'ai trouvé cette solution dans cet article

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Cela fonctionne comme un charme si la hauteur de l'élément n'est pas fixe.

marge: all_four_margin

en fournissant 50% à all_four_margin placera l'élément au centre

style="margin: 50%"

vous pouvez aussi l'appliquer pour suivre

marge: en haut à droite en bas à gauche

marge: en haut à droite et en bas à gauche

marge: haut et bas à droite et à gauche

en donnant le% approprié, nous obtenons l'élément où nous voulons.