Centering Using Tables

by techsin

HTML

<div class="out">
    <div class="in">
        <div class="cent"></div>
    </div>
</div>

CSS

html, body, .out { height: 100%; overflow: hidden; padding: 0; margin: 0;}
.out {
   display: table;
   width: 100%;
}
.in {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
.out, .in, .cent { border: 1px solid; }

.cent {
    display: inline-block;
    height: 300px; width: 300px;
}