Vertical align

by halirgb

HTML

<h1>Dynamic Vertical align with CSS</h1>
<div class="container">
   
    <div class="center-this">
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
    </div>
    
</div>
<div style="color:#000">
Source: http://css-tricks.com/centering-in-the-unknown/
    </div>

CSS

body{
    color:#FFFFFF;
    font-family:Sans-Serif;
}

h1{
    color:#000;
}

.container{
    width:100%;
    height:100%;
    background-color:#ba0e0e;
    text-align:center;
    position:fixed;
}
/*Ghost element*/
.container:before{
    content:'';
    vertical-align:middle;
    height:100%;
    display:inline-block;
    border:1px solid #fff;
}
.center-this{
    text-align:center;
    background-color:#9e0039;
    vertical-align:middle;
    display:inline-block;
    padding:20px;
    border: 1px solid #fff;
}