Html 如何将桌子放在div的中间？_Html_Css

Html 如何将桌子放在div的中间？

html css

Html 如何将桌子放在div的中间？,html,css,Html,Css,我想使div中的任何元素垂直和水平居中这是我的HTML： <!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <div class="login"> <form action="prosesLogin.php" method="post"> <h1>Login</h1

我想使div中的任何元素垂直和水平居中

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="login">
    <form action="prosesLogin.php" method="post">
        <h1>Login</h1>
        <table>
            <tbody>
                <tr><td>Username</td><td><input type="text" name="username"></td></tr>
                <tr><td>Password</td><td><input type="password" name="password"></td></tr>
                <tr><td colspan="2" align="right"><input type="submit" value="Login"> <input type="reset" value="Batal"></td></tr>
                <tr><td colspan="2" align="center">Belum memiliki akun ? <a href="register.php"><b>Daftar</b></a></td></tr>
            </tbody>
        </table>
    </form>
</div>
</body>
</html>

但是不行，请告诉我怎么做。谢谢。


<div id="parent">
    <div id="child">body</div>
</div>

<style>
#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}
</style>

身体
#父项{显示：表；}
#孩子{
显示：表格单元格；
垂直对齐：中间对齐；
}

另一种变体

互联网对这个问题已经有了很多答案

因此，如果需要，您可以使用

display:block

css属性将表作为普通的

block

容器进行处理。

您可以通过在css（文档：）中使用flexbox显示来实现这一点：

。登录{
高度：自动；
保证金：0自动；
边框：1px纯蓝色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
填充顶部：10px；
垫底：10px；
}
.登录h1{
边际上限：0；
}


登录
登录
用户名
密码
贝勒姆·梅米利基·阿肯？

<div id="parent">
    <div id="child">body</div>
</div>

<style>
#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}
</style>