Centrer verticalement une div dans une autre div

tl; dr

Vertical align middle fonctionne, mais vous devrez utiliser la table-cell sur votre élément parent et inline-block sur l’enfant.

Cette solution ne fonctionnera pas dans IE6 et 7.
Le vôtre est le moyen le plus sûr d’y aller.
Mais depuis que vous avez tagué votre question avec CSS3 et HTML5, je pensais que cela ne vous dérangeait pas d’utiliser une solution moderne.

La solution classique (disposition de la table)

C’était ma réponse originale. Cela fonctionne toujours bien et est la solution avec le support le plus large. La mise en forme des tables aura un impact sur vos performances de rendu . Je vous suggère donc d’utiliser l’une des solutions les plus modernes.

Voici un exemple

Testé dans:

• FF3.5 +
• FF4 +
• Safari 5+
• Chrome 11+
• IE9 +

HTML

 
your content 

CSS

 .cn { display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center; } .inner { display: inline-block; width: 200px; height: 200px; } 

Solution moderne (transformer)

Comme les transformations sont assez bien supscopes, il existe un moyen plus simple de le faire.

CSS

 .cn { position: relative; width: 500px; height: 500px; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; } 

Démo

♥ ma solution moderne préférée (flexbox)

J’ai commencé à utiliser de plus en plus la flexbox, elle est aussi bien supscope maintenant .

CSS

 .cn { display: flex; justify-content: center; align-items: center; } 

Démo

Autres exemples et possibilités: comparez toutes les méthodes sur une seule page

Une autre façon de réaliser ce centrage horizontal et vertical est la suivante:

 .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

( Référence )

Une autre façon utilise Transform Translate

La Div extérieure doit définir sa position sur relative ou fixed , et la Div Inner doit définir sa position sur absolute , top et left sur 50% et appliquer une transform: translate(-50%, -50%) .

 div.cn { position: relative; width: 200px; height: 200px; background: gray; text-align: center; } div.inner { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: red; } 

 
 
 test 
  

Vertical Align N’importe quoi avec seulement 3 lignes de CSS

HTML

 
 
 
Hello
 
  

Le plus simple

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

CSS

 .parent-of-element { position: relative; height: 500px; /* or height: 73.61% */ /* or height: 35vh */ /* or height: ANY HEIGHT */ } .element { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 

Selon Shouldiprefix ce sont les seuls préfixes dont vous avez besoin

Vous pouvez également utiliser% comme valeur pour la propriété ‘height’ de .parent-of-element, à condition que parent of element ait une hauteur ou un contenu qui augmente sa taille verticale.

Au lieu de me nouer avec des CSS difficiles à écrire et difficiles à maintenir (qui nécessitent également une validation cross-browser minutieuse!), Je trouve bien préférable d’abandonner CSS et d’utiliser à la place un HTML 1.0 simple:

Ceci accomplit tout ce que l’affiche originale voulait, et est robuste et maintenable.

Personnellement, je préfère l’astuce d’utiliser un pseudo-élément caché pour couvrir toute la hauteur du conteneur externe et l’aligner verticalement avec l’autre contenu. Chris Coyier a un bel article sur la technique. http://css-sortingcks.com/centering-in-the-unknown/ L’énorme avantage de ceci est l’évolutivité. Vous n’avez pas à connaître la hauteur du contenu ou à vous soucier de sa croissance / réduction. Cette solution évolue :).

Voici un violon avec tous les CSS dont vous avez besoin et un exemple pratique. http://jsfiddle.net/m5sLze0d/

 .center:before { content: ""; /* Adding Extra Space Above Element */ display: inline-block; height: 100%; margin-right: -0.3em; vertical-align: middle; } .center_element { display:inline-block; float:none; vertical-align:middle; white-space:normal; text-align:left; } 

J’utilise la solution suivante depuis plus d’un an, elle fonctionne également avec IE 7 et 8.

  
 
 
 
Line 1
 
Line 2
 
  

Cela fonctionne pour moi. La largeur et la hauteur du div externe peuvent être définies.

Voici le code:

 .outer { position: relative; text-align: center; width: 100%; height: 150px; // Any height is allowed, also in %. background: gray; } .outer > div:first-child { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: red; } 

 
 
 Put here your text or div content! 
  

Fiddle Link < http://jsfiddle.net/dGHFV/2515/ >

Essaye ça

  #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid red; } #innerDiv{ width: 284px; height: 290px; position:absolute; top: 0px; left:0px; right:0px; bottom:0px; margin:auto; border:1px solid green; } 

Si vous n’avez toujours pas compris après avoir lu les réponses merveilleuses données ci-dessus.

Voici deux exemples simples de la façon dont vous pouvez y parvenir.

En utilisant display: table-cell

 .wrapper { display: table-cell; vertical-align: middle; text-align: center; width: 400px; height: 300px; border: 1px solid #555; } .container { display: inline-block; text-align: left; padding: 20px; border: 1px solid #cd0000; } 

 
 
 Center align a div using "display: table-cell" 
  

entrez la description de l’image ici 100% ça marche

 .div1{ height: 300px; background: red; width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .div2{ background: green; height: 100px; width: 100%; } 
 
 sdfd 
  

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

Lorsque votre height n’est pas définie (auto); vous pouvez donner un peu de rembourrage à la div interne (haut et bas) pour le centrer verticalement:

Centrage vertical des objects div dans un autre div

Il suffit de définir le conteneur à display:table puis les éléments internes à display:table-cell . Définissez une height sur le conteneur, puis définissez vertical-align:middle sur les éléments internes. Cela a une large compatibilité jusqu’à l’époque d’IE9.

Notez simplement que l’alignement vertical dépendra de la hauteur du conteneur parent.

 .cn { display:table; height:80px; background-color:#555; } .inner { display:table-cell; vertical-align:middle; color:#FFF; padding-left:10px; padding-right:10px; } 

 
 
Item 1
 
Item 2
  

pour innerdiv qui ne spécifie pas sa valeur de hauteur, il n’y a pas de solution css pure pour le centrer verticalement. Une solution javascript pourrait être offsetHeight, puis calculer le style.marginTop.

Vous pouvez le faire avec un simple bloc javascript (jQuery).

CSS :

 #outerDiv{ height:100%; } 

Javascript :

essayez d’aligner l’élément interne comme ceci:

 top: 0; bottom: 0; margin: auto; display: table; 

et bien sûr:

 position: absolute; 

Vous pouvez centrer la div verticalement et horizontalement en CSS en utilisant flex;

 #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid #000; margin:0 auto; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } #innerDiv{ width: 284px; height: 290px; border:1px solid #eee; } 

Et le second est comme suit;

  #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid #000; } #innerDiv{ max-width: 300px; height: 200px; background-color: blue; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:1px solid #000; border-radius:4px; } 

Et le HTML résultant:

Cela fonctionnera de retour à IE6!

est également requirejs sur IE6! [forcera le mode ssortingct IE6 par défaut].

(bien sûr, la boîte de couleur est à des fins de démonstration uniquement)

  #outer{ width: 205px; height: 205px; margin: auto; text-align: center; } #inner{ text-align: left; vertical-align: middle; width: 120px; height: 120px; display: inline-block; } #center{ height: 100%; width:0px; vertical-align: middle; display: inline-block; } div {background: rgba(0,128,255,.6)} 

 
 
 The inner DIV 
  

aligner le texte sur l’élément parent, afficher le bloc en ligne sur l’élément enfant. Cela va tout centrer. Je crois que son appel un “bloc flottant”.

 
 
 some content 
 
  

C’est aussi une bonne alternative pour le float’s, bonne chance!

Centrer verticalement une div dans une autre div

 #outerDiv{ width: 500px; height: 500px; position:relative; background-color: lightgrey; } #innerDiv{ width: 284px; height: 290px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ background-color: grey; } 

Centrer l’alignement verticalement et horizontalement:

 #parentDiv{ display:table; text-align:center; } #child { display:table-cell; vertical-align:middle; } 

Je sais que cette question a été créée il y a un an … En tout cas merci CSS3 vous pouvez facilement aligner verticalement div en div (exemple ici http://jsfiddle.net/mcSfe/98/ )

 
 
 Go to Hell! 
 
 div { display:-moz-box; -moz-box-align:center; }