Vertical and horizontal centering

Demonstrates use of vertical and horizontal centering of an element of unknown size, using display:table and display:table-cell

by mklement

HTML

<div class='content'>
     <div class='centering-helper'>
         <div class='thing-to-center'>
             <p>I am centered both vertically and horizontally.</p>
             <br/>
             <p>Even though my size is not known in advance!</p>
             <ul>
                 <li>I could</li>
                 <li>go on, and on...</li>
             </ul>
         </div>
     </div>
 </div>

CSS

.content {
    background-color: gray;
    width: 100%;
    height: 100%; 
    position: absolute;
    /* 1st piece of the puzzle: display content as a table. */
    display: table; 
}

/* 2nd piece of the puzzle: a helper element that fills the content area and serves to center its descendants. */
.centering-helper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


.thing-to-center {
    background-color: white;
    border: 1px solid black;
    /* 3rd piece of the puzzle: display as an *inline* block so as to auto-size it to fit its content */
    display: inline-block;
}

ul {
    list-style-type: disc;
    margin: 20px;
    text-align: left;
}