Simplicity is always key when developing a site. Forcing a site to use nothing but CSS is more of a hassle when it comes to a situation like this one. In my vertical centering using CSS example you’re immediately forced into using conditional statements for Internet Explorer before your site ever even takes shape. Not only is it a lot of code to get the document to center vertically and horizontally but there’s a greater chance of breaking the working code as the side progresses or running into an issue with overflow. The single table in this article gets rid of what might happen and there’s no scrolling content in the center (unless that’s the look you’re after). Drop your CSS ego and use a table. Here’s the method (demo)
CSS Breakdown
height:100%;
margin:0;
padding:0;
font:normal 12px/15px “Lucida Grande”, Verdana, Arial, Helvetica, serif; /* not relevant to the layout */
}
h3 { margin:0; } /* not relevant to the layout */
table {
background-color:#666; /* not relevant to the layout */
padding:0;
margin:0;
height:100%;
}
table div {
background-color:#333; /* not relevant to the layout */
padding:10px; /* not relevant to the layout */
border:1px solid white; /* not relevant to the layout */
width:500px;
height:500px;
margin:0 auto;
text-align:left; /* not relevant to the layout */
color:white; /* not relevant to the layout */
}
The HTML
<tr>
<td valign=”middle” align=”center”>
<div>
<h3>Vertical Centering Using a Single Table</h3>
<p>Simplicity is clean. Tables or no tables.</p>
</div>
</td>
</tr>
</table>