web-dev-qa-db-fra.com

Comment puis-je centrer verticalement du texte dans une div dynamique de hauteur?

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center;">Text</h1>
    </div>
</body>

Comment puis-je centrer verticalement la balise h1 à l'intérieur de la balise div, quelle que soit la hauteur de l'élément div? Par exemple, si l'utilisateur change la hauteur de son navigateur, je veux que le h1 s'aligne verticalement au centre, en fonction de la nouvelle hauteur.

Merci.

htmlcsscentering
36
Albion

La meilleure solution que j'ai jamais rencontrée consiste à utiliser la propriété display et à définir l'élément wrapper comme table pour autoriser l'utilisation de vertical-align:middle sur l'élément à centrer:

Voir ceci travail Fiddle Example !

[~ # ~] html [~ # ~] 

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

[~ # ~] css [~ # ~] 

body {width: 100%; height: 100%;}   /* this is just to "view" the div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

TESTÉ SUR

Windows XP Profissional versão 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • Opera 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18.0.1025.168 m

Windows 7 Édition familiale Service Pack 1

  • Internet Explorer 9.0.8112.164211C
  • Opera 11.62
  • Firefox 12.0
  • Safari 5.1.4
  • Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (Build Build 130497 Linux)
61
Zuul

La réponse que je trouve la moins intrusive et la moins déroutante nécessite l'insertion d'un <span> tag avant le <h1> élément: http://jsfiddle.net/Wexcode/axRxE/

HTML:

<div>
    <span></span><h1>Text</h1>
</div>​

CSS:

div { text-align: center; /* horizontally center */ }
div span {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
div h1 {
    vertical-align: middle;
    display: inline-block; }​

Étendre cette technique pour l'aligner verticalement à la hauteur du navigateur: http://jsfiddle.net/Wexcode/axRxE/1/

17
Wex

http://jsfiddle.net/xQBbQ/

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
    </div>
</body>
4
Zoltan Toth

J'ai les 3 lignes de css les plus simples qui vont vous épater et vous vous demanderez "Pourquoi n'y ai-je pas pensé au départ". Utilisez-le sur l'élément que vous souhaitez positionner verticalement et le conteneur parent ajoute simplement une hauteur de 100%.

position: relative;
top: 50%;
transform: translateY(-50%);

La position peut être relative, absolue ou fixe.

4
Tom McDonough
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #0c0c0c;
}
.object {
    background-color: #666666;
    height: 350px;
    width: 600px;
}
.verticalCenter {
    width:600px;
    height:350px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
    <div class="verticalCenter">
        <div class="object">cetnered</div>
    </div>
</body>
</html>

Vous devez définir la hauteur et la largeur dans la classe .verticalCenter de la même manière que pour votre objet (div, flash, image, texte) qui doit être centré. Et les marges doivent être la moitié de ces hauteur et largeur.

Je ne pense pas qu'il y ait de solution si vous changez cet objet dynamiquement. À moins, peut-être avec des javascripts.

1
heroix

Voici une solution assez simple. Il est principalement basé sur la configuration de display:table-cell et en choisissant un alignement vertical comme le milieu.

HTML:

<div id="vertical">
    <p>this text is vertically centered.  It's long enough to wrap, and should work for any size chunk of content.</p>
    <p>Heck, it even works with multiple items in the middle.</p>
</div>​​

CSS:

#vertical {
    display:table-cell;
    vertical-align:middle;
    height: 500px;
    width: 300px;
}​

JSFiddle: http://jsfiddle.net/6Re3E/1/

1
Surreal Dreams

J'utilise des tables pour tout. Personnellement, je n'aime pas utiliserdisplay: table ou quelque chose comme ça quand il y a quelque chose qui existe déjà.

<table style="width: 100%; height: 100%;">
    <tr>
        <td>
            <!-- Whatever you want vertically and horizontally centered -->
        </td>
    </tr>
</table>

En utilisant cette même méthode, vous pouvez faire quelque chose comme ceci pour votre cas:

<div id="container-div" style="position: relative">
    <div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
    <div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td>
                    <!-- Whatever you want vertically and horizontally centered -->
                </td>
            </tr>
         </table>
     </div>
</div>
0
Superjova