Centre le contenu dans un div positionné absolu

J'ai un absolument positionné élément contenu à l'intérieur. Il peut être un <h1> ou quelques <p> tag. Donc je ne sais pas la hauteur du contenu.

Comment puis-je verticalement centrer le contenu à l'intérieur de la grande positionné div?

HTML :

<div id="absolute">
    <div class="centerd">
    <h1>helo</h1>
    <span>hi again</span>
    </div>
</div>

CSS :

#absolute {
    position:absolute;
    top:10px;
    left:10px;
    width:50%;
    height:50%;
    background:yellow;
}

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

Violon

source d'informationauteur user2324261

  1. 11

    si vous ajoutez display:table à votre #absolute div, vous devriez obtenir ce que vous voulez:

    http://jsfiddle.net/3KTUM/2/

  2. 6

    Changer votre #absolute div également l'utilisation:

    display:table;
vertical-align:middle;
text-align:center;

    http://jsfiddle.net/3KTUM/4/

  3. 3

    Cela peut être fait avec flexbox trop:

    #absolute {
  align-items: center;
  display: flex;
  justify-content: center;
}
  4. 2

    Juste faire la div relative à son absolute parent et l'utilisation text-align: centercomme ceci:

    .centerd {
    position: relative;
    width: 100%;
    text-align: center;
    /*display:table-cell;
    vertical-align:middle;*/
}

    Voir exemple de violon

  5. 1

    utiliser text-align:center ou à gauche:50%