CSS Only Solution Using calc
Check out the Live Demo
HTML:
<div class="Site">
<header class="Header">
<!-- content -->
</header>
<div class="ContentContainer">
<span class="Centerer"></span>
<div class="Content">
<ul style="list-style: none; margin: 0; padding: 0">
<li>
Text
</li>
<li>
Text
</li>
<li>
Text
</li>
</ul>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
.Site
{
height: 100%;
}
.Header
{
height: 120px;
background-color: darkblue;
}
.ContentContainer
{
background-color: azure;
height: calc(100% - 120px);
}
.Centerer
{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}
Cleaner Version with Pseudo Elements
View the cleaner version with pseudo elements in this Working Fiddle
<div class="Site">
<header class="Header">
<!-- content -->
</header>
<div class="ContentContainer">
<div class="Content">
<ul style="list-style: none; margin: 0; padding: 0">
<li>
Text
</li>
<li>
Text
</li>
<li>
Text
</li>
</ul>
</div>
</div>
</div>
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
}
.Site
{
height: 100%;
}
.Header
{
height: 120px;
background-color: darkblue;
}
.ContentContainer
{
background-color: azure;
height: calc(100% - 120px);
}
.ContentContainer:after
{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}