Содержание центра в абсолютном расположении div

У меня есть абсолютизированный элемент с содержимым внутри. Это может быть тег <h1> или несколько <p>. Поэтому я не знаю высоту контента.

Как я могу вертикально центрировать содержимое внутри абсолютизированного позиционирования 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;
}

Fiddle

Ответы

Ответ 1

если вы добавите display:table в свой #absolute div, вы должны получить то, что хотите:

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

Ответ 2

Измените свой #absolute div, чтобы использовать:

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

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

Ответ 3

Просто сделайте div relative его родительскому absolute и используйте text-align: center, например:

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

См. пример скрипта

Ответ 4

используйте text-align: center или left: 50%

Ответ 5

Это можно сделать и с помощью flexbox:

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