web-dev-qa-db-fra.com

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

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

Dans exemple , il y a deux contenus de hauteurs différentes. Quel est le meilleur moyen de centrer verticalement avec la classe .content. (et cela fonctionne pour tous les navigateurs et sans la solution de table-cell)

Ayez quelques solutions à l'esprit, mais voudriez connaître d'autres idées, l'une utilise position:absolute; top:0; bottom: 0; et margin auto.

htmlcssvertical-alignment
77
Ricardo Rodrigues

J'ai un peu étudié cela et d'après ce que j'ai découvert, vous avez quatre options:

Version 1: Div parent avec affichage comme cellule de tableau

Si cela ne vous dérange pas d'utiliser le display:table-cell sur 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;
}​

Live DEMO

Version 2: div parent avec bloc d'affichage et cellule d'affichage de tableau 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;    
}​

Live DEMO

Version 3: parent div flottant et content div en tant que display table-cell

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

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

Live DEMO

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

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 la div du contenu doit avoir la hauteur définie que votre texte remplira et le haut de la marge sera déduit de cela. Ce problème peut être vu dans la démo. Vous pouvez le faire fonctionner manuellement pour chaque scénario en modifiant le pourcentage d'altitude de votre div de contenu et en le multipliant par -5 pour obtenir votre valeur de 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;
}​

Live DEMO

119
Josh Mein

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

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

Démo en direct

33
martin36

J'ai trouvé cette solution dans ce 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 fixée.

27
N Kumar