CSS Vertical Centering Made Easy

In CSS Level 2, you won't find the vertical centering property . What to do.
But even in CSS2, you can center boxes vertically by combining a few properties. The trick is to specify that the outer box should be formatted like a table cell, because the contents of the cell should be centered vertically.

The example below shows a block element in which the paragraph lies, naturally we replace the block element with a table cell , and sets the vertical centering (middle) - display: table-cell; vertical-align: middle;

*div class="container"
style="height: 300px;
width:500px;
margin:0 auto;
display:table-cell;
vertical-align: middle;
border:1px dashed #999;
text-align:center;">
*p>Here is a small paragraph centered vertically</p*
</div*





Bonus from me: - nice music