web-dev-qa-db-fra.com

Centrer verticalement un div à l'intérieur d'un autre div

J'essaye de vertical-align: middle un div à l'intérieur d'un autre div, mais pour une raison quelconque, il ne fonctionne pas correctement. Qu'est-ce que je fais mal?

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
vertical-align: middle;
}
<div id = 'wrapper'> 
<div id = 'block'> I'm Block </div>
<div>

PS: Ceci est juste un exemple, donc non, je ne connais pas vraiment la largeur et la hauteur réelles des divs, car elles sont dynamiques, en fonction de leur contenu, alors s'il vous plaît pas de marge en haut: 125px, ou padding-top: 125px réponses , ou des réponses comme ça.

htmlcsscss3flexboxvertical-alignment
11
jessica

La propriété vertical-align S'applique uniquement aux éléments inline-level et table-cell ( source ). Dans votre code, vous travaillez avec des éléments au niveau du bloc.

Essayez ceci flexbox:

#wrapper {
    border: 1px solid red;
    width: 500px;
    height: 500px;
    display: flex;               /* establish flex container */
    align-items: center;         /* vertically center flex items */
}

#block {
    border: 1px solid blue;
    width: 500px;
    height: 250px;
    /* vertical-align: middle; */
}
<div id='wrapper'>
    <div id='block'> I'm Block </div>
<div>

En savoir plus sur l'alignement flex ici: Méthodes pour aligner les éléments flex

Prise en charge du navigateur: Flexbox est pris en charge par tous les principaux navigateurs, sauf IE <1 . Certaines versions de navigateur récentes, telles que Safari 8 et IE10, nécessitent préfixes du fournisseur . Pour un moyen rapide d'ajouter des préfixes, utilisez Autoprefixer . Plus de détails dans cette réponse .

26
Michael_B

Voici comment je fais normalement cela.

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
position: relative;
}
#block {
border: 1px solid blue;
width: 500px;
height: 250px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div id="wrapper">
<div id="block"></div>
</div>

Un moyen facile de le rendre dynamique.

6
mattdevio

Vous pouvez le faire de cette façon:

#wrapper {
  border: 1px solid red;
  width: 500px;
  height: 500px;
}
#block {
  border: 1px solid blue;
  width: 500px;
  height: 250px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Voici une vue en direct: https://jsfiddle.net/w9bpy1t4/

2
melalonso

Tu peux le faire:

#block {
border: 1px solid blue;
margin:25% 0;
width: 500px;
height: 250px;
vertical-align: middle;}

Mais ce n'est pas ce que vous cherchez!

ou comme ça:

#wrapper {
border: 1px solid red;
width: 500px;
height: 500px;
display:table-cell;
vertical-align: middle;
}
#block {
border: 1px solid blue;
display:inline-block;
width: 500px;
height: 250px;
}
0
Jean-Francois Demers

si vous connaissez la hauteur de la division intérieure, alors vous pouvez utiliser la position relative sur le wrapper et la position absolue dans la division intérieure avec une certaine marge. Donc css peut être ça

#wrapper {
 border: 1px solid red;
 width: 500px;
 height: 500px;
 position: relative;
 }
#block {
 border: 1px solid blue;
 width: 500px;
 height: 250px;
 vertical-align: middle;
 position: absolute;
 margin-top: 50%;
 top: -125px;
 }
0
pawan