Html 需要将桌子垂直放置在高度为500像素的div中间_Html_Css_Stylesheet

Html 需要将桌子垂直放置在高度为500像素的div中间

html css

Html 需要将桌子垂直放置在高度为500像素的div中间,html,css,stylesheet,Html,Css,Stylesheet,我想将我的表格定位为垂直对齐，中间对齐，文本对齐，高度为500px的div的中心对齐，但我的表格只是居中对齐，而div的中间并没有垂直对齐 /*CSS-我是从一个外部文件引用下面的CSS .login { position: relative; margin: 0 auto; min-height: 500px; display: block; border: .5px solid; bor

我想将我的表格定位为垂直对齐，中间对齐，文本对齐，高度为500px的div的中心对齐，但我的表格只是居中对齐，而div的中间并没有垂直对齐

/*CSS-我是从一个外部文件引用下面的CSS

    .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>

。登录{
位置：相对位置；
保证金：0自动；
最小高度：500px；
显示：块；
边框：.5px实心；
边框颜色：浅灰色；
}
.可登录{
位置：相对位置；
边框样式：实心；
边框颜色：浅灰色；
边框宽度：1.5px；
填充：0px；
边界间距：0px；
文本对齐：居中；
垂直对齐：底部对齐；
左：30%；
身高：50%；
底部：50%；
}*/
登录
用户名
密码

将此样式添加到表中

position: absolute;
vertical-align: middle

将其添加到.logintable类中：

  position: absolute;
  bottom: 50%;
  transform: translateY(50%);

在css中尝试以下类：

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

.logintable {
    border-style: solid;
    border-color: lightgray;
    border-width: 1.5px;
    padding: 0px;
    border-spacing: 0px;
    text-align: center;
    height: 50%;
}*/

希望这有帮助。

试试这个：

.logintable {
    position: absolute;
    border-style: solid;
    border-color: lightgray;
    border-width: 1.5px;
    padding: 0px;
    border-spacing: 0px;
    text-align: center;
    vertical-align: bottom;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
}