Center Vertical with CSS

Published 4 years ago.
Last updated

Demo

This div is vertically centered.

CSS

.demo-container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.demo-container {
    background-color: #CCC;
    display: table;
    min-height: 100px;
    width: 100%;
}
.demo-element
{
    background-color: #BBB;
    display: inline-block;
}

HTML

<div class="demo-container">
    <div class="demo-element">This div is vertically centered.</div>
</div>