Last Updated: February 25, 2016
·
4.022K
· ozinepank

vertical-align : middle

CSS

html,body {
margin:0;
padding:0;
height:100%; /*stretch the canvas to 100 percent height of the browser.       Applies for body and html*/
font-family: Calibri, sans-serif;
font-size:14px;
}

div#wrapper{
display:table;/*changes the div into a table layout. this now works on all  browsers*/
height:100%; /*makes the div stretch the full height of the browser window*/
margin:0 auto; /*center aligning a div horizontally.*/
min-width:1000px; /* minimum required width of the div*/
}

div#container{
display:table-cell;/*displays the div as a table cell, thus making it a part of the table structure. */
vertical-align:middle;/*Vertically aligns the now div turned cell into the div turned table*/
position:relative;/*it is necessary to use the position tag to make the table-   cell code work*/
text-align:center;/*this can be changed or removed as per your wish and  website layout.*/
}

Article by : http://thoughtfulviewfinder.in/vertically-horizontally-center-align-css-html/
Demo : http://jsfiddle.net/ozinepank/C8XW8/7/show/