Je veux centrer un div
verticalement avec CSS. Je ne veux pas de tableaux ni de JavaScript, mais uniquement du CSS pur. J'ai trouvé quelques solutions, mais toutes ne prennent pas en charge Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
Comment centrer verticalement un div
dans tous les principaux navigateurs, y compris Internet Explorer 6 ?
Vous trouverez ci-dessous la meilleure solution globale que j'ai pu mettre au point pour centrer verticalement et horizontalement une zone de contenu de largeur fixe et de hauteur variable. Elle a été testée et fonctionne pour les versions récentes de Firefox, Opera, Chrome et Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
[Voir un exemple fonctionnel avec du contenu dynamique][1]
J'ai intégré un contenu dynamique pour tester la flexibilité et j'aimerais savoir si quelqu'un y voit un problème. Cela devrait également fonctionner pour les superpositions centrées : lightbox, pop-up, etc.
En fait, vous avez besoin de deux div's pour le centrage vertical. La div contenant le contenu doit avoir une largeur et une hauteur.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Voici le [résultat][1]
[1] :
Malheureusement - mais ce n'est pas une surprise - la solution est plus compliquée qu'on ne le souhaiterait. Malheureusement aussi, vous devrez utiliser des divs supplémentaires autour de la div que vous souhaitez centrer verticalement.
Pour les navigateurs conformes aux normes tels que Mozilla, Opera, Safari, etc., vous devez définir la division externe pour qu'elle s'affiche comme une table et la division interne pour qu'elle s'affiche comme une table-cellule - qui peut alors être centrée verticalement. Pour Internet Explorer, vous devez positionner la division interne absolument à l'intérieur de la division externe, puis spécifier le haut à 50%. Les pages suivantes expliquent bien cette technique et fournissent également quelques exemples de code :
Il existe également une technique pour effectuer le centrage vertical en utilisant JavaScript. L'article [Vertical alignment of content with JavaScript & ; CSS][3] en fait la démonstration.
[1] : http://www.jakpsatweb.cz/css/css-vertical-center-solution.html [2] : http://www.laboratoriocaffeina.it/design/2007/05/11/vertical-centering-in-css-with-unknown-height-ie7-compatible.html [3] : http://www.alistapart.com/d/footers/footer_variation1.html [4] : http://web.archive.org/web/20101107022613/http://www.laboratoriocaffeina.it/design/2007/05/11/vertical-centering-in-css-with-unknown-height-ie7-compatible.html