An element can be easily horizontally centered using margin:0 auto properties. To make it vertically centered more works are needed to be done.
Lets say we have a markup like following having a div with id Body. Its going to be centered.
<body><div id="body">Content goes here</div></body>
CSS Code:
html,
body {
width:100%;
height:100%;
}
html {display:table;}
body {
display:table-cell;
vertical-align:middle;
}
#body {
max-width:50em;
margin:0 auto;
}
Here, we made the HTML to behave like a table and body as a inner cell of the table. So saying vertical-align:middle makes everything inside body vertically centered.
More explanation can be found in 456bereastreet.com
Advertisement
