vertically centered text in absolute positioned div

by James Morris

HTML

<div id="app">
    <div id="cloud">
        <div id="svgwrap">
            <svg viewbox="0 0 300 100">
                <rect width="300" height="100" fill="#bbbbbb"></rect>
            </svg>
        </div>
        <div id="text-wrap">
            <p id="text">the text to v-center</p>
        </div>
    </div>
</div>

CSS

#app
{
    postion:relative;
    width: 500px;
    height:500px;
    margin:auto;
}
#cloud
{
    postion:absolute;
    top:20;
    left:50;
}
#svgwrap
{
    position:relative;
    width:350px;
    height:120px;
}
#text-wrap
{
    position:relative;
    top:-100px;
    left:30px;
    border:1px solid blue;
    width:200px;
    height:80px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
#text
{
    text-align:center;
    display:inline-block;
}