Выровнять текст по вертикали в абсолютном положении

Question

Я хотел бы расположить текст по центру внутри моего div, но выровнять по вертикали: середина не работает.

Это мой css:

body,html {
    height:100%;
    min-height:100%;
}
#container {
    position:relative;
    width:300px;
    height:70%;
    background:red;
}

#box {
    position:absolute;
    bottom:30px;
    background:yellow;
    height:20%;
    vertical-align:middle;
    width:100%;
    text-align:center;
}

Это мой HTML:

<div id="container">
    <div id="box">
        <p>text</p>
    </div>
</div>

Я пробовал с полем сверху с%, но это не лучшее решение. Вот моя онлайн-версия: http://jsfiddle.net/f2qf031h/

Answer 1

Один из способов сделать это с помощью макета flexbox.

Установив:

#box {
   ...
   display:flex;
}

#box p{
    align-self:center;
    text-align:center;
    width:100%;
}

jsfiddle: http://jsfiddle.net/f2qf031h/2/

Answer 2

Попробуйте этот код

#box {
    position: relative;
    top:50%;
    transform: translateY(-50%);
    background:yellow;
    height:20%;
    width:100%;
    display: table; 
    overflow: hidden;
    text-align:center;
}