div水平垂直居中

css样式:

插播一下 让checkbox字体和框在同一条水平线上的样式
.checkbox
{
    vertical-align: middle;
    margin-top: 0;
    line-height: 24px;
    margin-bottom: 2px;
}

/*
div水平垂直居中*/ .topdiv { text-align:center; } .insidediv1 { position:absolute; left:50%; top:50%; margin-left:width/2; margin-top:height/2; } .insidediv2 { background-color:Yellow; width:300px; height:180px; margin-left:-150px; /*对应数值是width的二分之一*/ margin-top:-90px; /*对应数值是height的二分之一*/ }

 aspx或html页面:

<body>

    <form id="form1" runat="server">

    <div class="topdiv">

        <div class="insidediv1">

            <div class="insidediv2">

                <table cellpadding="0" cellspacing="0" class="table">

                    <tr>

                        <td>

                            登 录 名:

                        </td>

                        <td align="left">

                            <asp:TextBox ID="txtLoginName" runat="server" Width="150px" Height="26px"></asp:TextBox>

                        </td>

                    </tr>

                    <tr>

                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:

                        </td>

                        <td align="left">

                            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="150px" Height="26px"></asp:TextBox>

                        </td>

                    </tr>

                    <tr>

                        <td>

                            <asp:Button ID="btnLogin" runat="server" Text="登录" OnClick="btnLogin_Click" />

                        </td>

                        <td>

                            <asp:Button ID="btnReset" runat="server" Text="重置" OnClick="btnReset_Click" />

                        </td>

                    </tr>

                </table>

            </div>

        </div>

    </div>

    </form>

</body>

 

你可能感兴趣的:(垂直居中)