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/
Written by ozinepank
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Related Tags
#css
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#