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


93

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.


2
Vos questions doivent être entièrement autonomes. Sinon, lorsque l'URL disparaît, c'est inutile.
Sparky


Probablement, mais cette fois-là, je n'avais pas la solution que je voulais ... cela offre plus d'options
Ricardo Rodrigues

1
tl; dr en 2020 : display: flex; align-items: center;. Si vous ne souhaitez pas qu'il soit également centré horizontalement, ajoutez flex-direction: column;.
Devin Burke

Réponses:


132

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



1
La version 2 est ce que je recherche, mais le contenu n'est pas centré verticalement. Le areacontenu ou le contentcontenu a- t-il une importance ?
Shimmy Weitzhandler

61

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


1
@nihiser Seulement si vous voulez aussi le centrer horizontalement aussi, ou si vous l'auriez régléflex-direction: column
martin36

31

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.


1
JFYI, j'ai trouvé le même article et utilisé cette approche. J'ai dû changer la position en absolue pour que cela fonctionne dans Chrome.
Jack A.

@JackA. fonctionne avec position: relativeen chrome 62. Je ne sais pas à quel point cela remonte.
Jared Smith

-7

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.


4
veuillez clarifier, votre formulation semble un peu partout et décousue.
Benjamin Trent

Réponse peu claire avec une mauvaise formulation et limitée à la liste des valeurs possibles pour margin.
nuno le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.