web-dev-qa-db-fra.com

Centrer le texte verticalement dans un div de 100%?

Je travaille avec une div qui est 100% de la taille de la div parent.

La div ne contient qu'une seule ligne de texte.

La div ne peut pas avoir une hauteur fixe.

Donc ma question est.

Comment centrer verticalement la ligne de texte?

J'ai essayé d'utiliser:

display: table-cell;  
line-height:200%;

Si c'est important, la div est absolument positionnée.

CSS en cours 

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}
htmlcsscentering
33
Hailwood

Cette réponse n'est plus la meilleure réponse ... voir la réponse de la flexbox ci-dessous à la place!

Pour le centrer parfaitement (comme indiqué dans réponse de david ), vous devez ajouter une marge supérieure négative. Si vous savez (ou forcez) à n’avoir qu’une seule ligne de texte, vous pouvez utiliser:

margin-top: -0.5em;

par exemple:

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: Ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​

La réponse initialement acceptée ne sera pas centrée verticalement sur le milieu du texte (elle est centrée sur le haut du texte). Donc, si votre parent n’est pas très grand, il n’aura pas l’air centré, par exemple:

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
}​ 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>​
26
gregjhogan

Edit: Le moyen le plus simple et le meilleur de le faire (actuellement en 2015 2017) utilise flexbox:

.parent-selector {
    display: flex;
    align-items: center;
}

Et c'est tout: D

Découvrez cet exemple de travail: http://jsfiddle.net/qj2Jr/114/

Ancienne réponse: Vous pouvez utiliser vertical-align: middle si vous spécifiez également display: table-cell;

.div {
    display: table-cell;
    vertical-align: middle;
}

Exemple de travail: http://jsfiddle.net/qj2Jr/1/

Si cela ne fonctionne pas, vous pouvez essayer de définir son parent comme display: table;:

.parent-selector {
    display: table;
}

Edit: Vous avez cette méthode ainsi que toutes les méthodes abordées dans cette autre question: Comment centrer le texte verticalement avec CSS?

29
elboletaire

Essayez celui-ci http://jsfiddle.net/Husamuddin/ByNa3/ Cela fonctionne bien avec moi,
css

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

et le html 

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>
7
Husamuddin

Comme il est parfaitement positionné, vous pouvez utiliser top: 50% pour l’aligner verticalement au centre.

Mais vous rencontrez ensuite le problème de la taille de la page par rapport à votre souhait. Pour cela, vous pouvez utiliser le débordement: hidden pour le div parent. C'est ce que j'ai utilisé pour créer le même effet:

Le CSS:

div.parent {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
div.parent div.absolute {
    position: absolute;
    top: 50%;
    height: 300px;
}

Le HTML:

<div class="parent">
    <div class="absolute">This is vertically center aligned</div>
</div>
6
sarcastyx

Même si cette question est assez ancienne, voici une solution qui fonctionne avec des lignes simples et multiples qui doivent être centrées verticalement (elles peuvent facilement être centrées à la fois verticalement et horizontalement, comme indiqué dans le fichier css de la Demo .

HTML

<div class="parent">
    <div class="child">Text that needs to be vertically centered</div>
</div>


CSS

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
3
mkmllr

Je suis en désaccord, voici une solution sans JS, qui fonctionne:

<html style="height: 100%;">
    <body style="vertical-align: middle; margin: 0px; height: 100%;">
        <div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
            <div style="display: table-cell; width: 100%; vertical-align: middle;">
                <div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
            </div>
        </div>
    </body>
</html>
2
user1514042

emballez simplement votre contenu avec un tableau comme celui-ci:

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><
1
jcfrei

Si vous savez quelle sera la hauteur de votre texte, vous pouvez utiliser une combinaison de top:50% et margin-top:-x px où x est la moitié de la hauteur de votre texte.

Exemple de travail: http://jsfiddle.net/Qy4yy/

1
david

Si vous définissez une hauteur de trait identique à celle du div, le texte sera centré. Ne fonctionne que s'il n'y a qu'une seule ligne. (comme un bouton).

0
nunny

avez-vous essayé line-height: 1em ;? Je rappelle que c'est le moyen de le centrer verticalement. 

0
Genia S.

Avez-vous essayé vertical-align: middle ???

Vous trouverez plus d’informations sur vertical-align ici: http://www.w3schools.com/css/pr_pos_vertical-align.asp

0
Wagner Silveira

L'alignement vertical, la hauteur dynamique combinée à la position absolue est excepté certaines conditions spéciales impossibles sans quelques lignes de JS (par exemple, jQuery). (peut éventuellement être résolu avec un code backend dans certains cas, ou une hauteur minimale combinée avec des styles de dessus ou de marge sensibles, mais pas parfaite)

Je n'utilise principalement la position absolue que lorsque quelque chose est supposé "apparaître" par rapport à quelque chose qui est dans le flotteur, je pense que c'est la meilleure façon de l'utiliser pour ne pas avoir à jouer avec des choses comme ça.

Aucune infraction, mais la plupart des réponses ici sont loin.

0
plebksig

Solution moderne - fonctionne dans tous les navigateurs et IE9 +

support caniuse - navigateur.

.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

Exemple: http://jsbin.com/rehovixufe/1/

0
AntonB