html - 将表格垂直和水平居中对齐

Question

.cls_forgotpwd_container
{
    font-family: sans-serif;
    font-size: 13px;
    width: 350px;
    /*margin: auto;*/
    width: 350px;
    display: table-cell;
    vertical-align: middle;
}

.cls_forgotpwd_table label
{
    margin-right: 10px;
}

.cls_forgotpwd_table input[type="password"]
{
    width: 200px;
    height: 20px;
    border: 1px solid #555;
}

body
{
    display: table;
}

<div class="cls_forgotpwd_container">
    <form class="cls_forgotpwd_form" id="forgotpwd_form">
        <table class="cls_forgotpwd_table">
            <tbody>
            <tr>
                <td><label>Password</label></td>
                <td><input type="password" name="password"></input></td>
            </tr>
                <td><label>Confirm Password</label></td>
                <td><input type="password" name="confirm_password"></input></td>
            <tr>
                <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td>
            </tr>
            <tr>
            </tr>
            </tbody>
        </table>
    </form>
</div>

怀疑

1) 我尝试过display: table和tabel-cell with vertical-align:middle但它在我的场景中不起作用。而且这些数据不是表格，所以我认为这不是正确的方法。

2) 我不喜欢position absolute与 top and left values in % 。如果我没有其他选择，我会选择这个。

是否还有其他方法可以使 div 居中对齐？或者我应该在上述两个选项中使用哪一个？如果我必须选择选项1，它在我的情况下不起作用。

我不喜欢margin居中对齐。和flex IE 不支持。

margin:0 auto与 width:350px成功将 div 居中对齐。

有什么建议吗？

Answer 1

你的代码

body, html - 默认 - height: auto; width: auto;

.cls_forgotpwd_container
{
    font-family: sans-serif;
    font-size: 13px;
    width: 350px;
    /*margin: auto;*/
    width: 350px;
    display: table-cell;
    vertical-align: middle;
}

.cls_forgotpwd_table label
{
    margin-right: 10px;
}

.cls_forgotpwd_table input[type="password"]
{
    width: 200px;
    height: 20px;
    border: 1px solid #555;
}

body
{
    display: table;
    border: 2px solid #f00;
}

<div class="cls_forgotpwd_container">
    <form class="cls_forgotpwd_form" id="forgotpwd_form">
        <table class="cls_forgotpwd_table">
            <tbody>
            <tr>
                <td><label>Password</label></td>
                <td><input type="password" name="password"></input></td>
            </tr>
                <td><label>Confirm Password</label></td>
                <td><input type="password" name="confirm_password"></input></td>
            <tr>
                <td><input class="cls_submit" type="submit" name="submit" value="Change It"></input></td>
            </tr>
            <tr>
            </tr>
            </tbody>
        </table>
    </form>
</div>

这样就可以居中 body和html添加-height: 100%和width: 100%

html, 
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: table;     
    border: 3px solid #f00;
}

.cls_forgotpwd_container {
    font-family: sans-serif;
    font-size: 13px;
    width: 350px;      
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.cls_forgotpwd_container form{
    display: inline-block;
    border: 1px solid #ccc;
}
.cls_forgotpwd_table label {
    margin-right: 10px;
}
.cls_forgotpwd_table input[type="password"] {
    width: 200px;
    height: 20px;
    border: 1px solid #555;
}

<div class="cls_forgotpwd_container">
    <form class="cls_forgotpwd_form" id="forgotpwd_form">
        <table class="cls_forgotpwd_table">
            <tbody>
                <tr>
                    <td>
                        <label>Password</label>
                    </td>
                    <td>
                        <input type="password" name="password"></input>
                    </td>
                </tr>
                <td>
                    <label>Confirm Password</label>
                </td>
                <td>
                    <input type="password" name="confirm_password"></input>
                </td>
                <tr>
                    <td>
                        <input class="cls_submit" type="submit" name="submit" value="Change It"></input>
                    </td>
                </tr>
                <tr></tr>
            </tbody>
        </table>
    </form>
</div>