Search code examples
htmlcssstylesheet

need to position a table vertically middle of a div which has height of 500 px

I want to position my table as vertical-align as middle and text-align as center of the div which has height of 500px, but my table is just center aligned and it is not vertically aligned for middle of the div.

/* CSS - I am refering the below css from a external file. 

    .login {
        position: relative;
        margin: 0 auto;
        min-height: 500px;
        display: block;
        border: .5px solid;
        border-color: lightgray;
    }

    .logintable {
        position: relative;
        border-style: solid;
        border-color: lightgray;
        border-width: 1.5px;
        padding: 0px;
        border-spacing: 0px;
        text-align: center;
        vertical-align: bottom;
        left: 30%;
      height: 50%;
        bottom: 50%;
    }*/
</style> </head> <body>

<div id="login" class="login">

    <table class="logintable">
        <tbody>
            <tr>
                <td colspan="2">Log In</td>
            </tr>
            <tr>
                <td>
                    <label id="lblUserName">User Name</label>
                </td>
                <td>
                    <asp:textbox id="txtUserName" runat="server"></asp:textbox>
                </td>
            </tr>
            <tr>
                <td>
                    <label id="lblPassword">Password</label>
                </td>
                <td>
                    <asp:textbox id="txtPassword" runat="server" textmode="Password"></asp:textbox>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <asp:button id="LoginButton" runat="server" text="Login" onclick="LoginButton_Click" />
                </td>
            </tr>
        </tbody>
    </table>
</div> </body> </html>
Solution

  • Add this style to the table

    position: absolute;
vertical-align: middle

    http://jsfiddle.net/vqfpwfeL/1/