I’ve been pulling out my hair for the last 30 minutes trying to get an HTML table with height 100% to work in my ASP.NET 2.0 application.  I’m trying to render a block of HTML in the center of my application page.

I finally found the solution to my problem – it seems that turning on XHTML compliance with the DOCTYPE declarator breaks the table height attribute – ASP.NET 2.0 is XHTML compliant out of the box, and since the height attribute is no longer supported in this manner, my page broke.

This article helps to clarify…. http://www.apptools.com/examples/tableheight.php

The article suggests, applying the following style to the page, and declaring a top level table with id “wrapper” containing a single column and row – align center and valign middle – to obtain desired center page behavior.

<style type="text/css">
    html, body, #wrapper
    {
        height:90%;
        margin: 0;
        padding: 0;
        border: none;
        text-align: center;
    }
    form
    {
        margin: 0;
        padding: 0;
    }
    #wrapper
    {
        margin: 0 auto;
        text-align: left;
        vertical-align: middle;
        width: 400px;
    }
</style>

<table id="wrapper" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="middle">
            <form id="mainForm" runat="server">
                <asp:PlaceHolder ID="CONTENT" runat="server"></asp:PlaceHolder>
            </form>
        </td>
    </tr>
</table>

Sadly, placing the wrapper table inside the form tags breaks the behavior, so I applied centering to the entire page contents, form tags and all.  This works for my current situation, but isn’t ideal.