Center page verticaly and horizontaly
Posted by admin in html / css
I have to center almost all web pages horizontaly and it is simply made by adding margin and width parameter to your container div. Then I came accross the problem to align the page also verticaly to the center of a browser. I found some suggestions with 50% width or height of divs, but the problem was that page would hide at the top of the browser window as you resize it. Sometimes it’s good to look a little in the past as I found the solution using tables (for a long time now I use nothing but divs!). Page is verticaly centered if you add the vertical-align parameter to the table tag. Below you can find full code for centering your page.
HTML code:
<html>
<head>
<title>Center page verticaly and horizontaly</title>
</head>
<body>
<table id=”container”>
<tr>
<td>Contenet is centered verticaly and horizontaly.</td>
</tr>
</table>
</body>
</html>
CSS code:
html, body, #container {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
#container {
margin: 0 auto;
text-align: left;
vertical-align: middle;
width: 400px;
}
Here is example.
