元素在 Google Chrome 中居中，但在 Mozilla Firefox 中不居中

Question

我正在尝试为个人项目（一个问题跟踪应用程序）创建简单的登录页面。这是登录页面的HTML代码-

<!Doctype html>
<html>
<head>
    <title>All Issues</title>
    <meta http-equiv="content-type" charset="utf-8" content="text/html"/>
    <link rel="stylesheet" href="css/main.css"  type="text/css" />
    <link rel="shortcut icon" type="image/png" href="img/favicon.png" />

</head>

<body>

<header>
    <h1>All Issues</h1>   
    <h3>A centralized issue tracking system, for customers and dev teams. &nbsp;  <a href="about.html">Learn More</a></h3>
</header>

<section>
    <h3>Dont' have an account? <a href="signup.jsp">Sign Up here</a></h3>
</section>

<table id="login">
    <thead>
        <tr>
            <th>Developer Login</th>
            <th>Customer Login</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2" id="forgotpass">
                <a href="reset_password.jsp">I forgot my password</a>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>
                <form action="/login" method="post" id="devlogin">
                    Email: <input type="email" id="devUName" required="required" /><br>
                    Password: <input type="password" id="devPass" required="required" /><br>
                    <input type="submit" value="Log In" id="devSubmit" />
                </form>
            </td>
            <td>
                <form action="/login" method="post" id="custlogin">
                    Email: <input type="email" id="custUName" required="required" /><br>
                    Password: <input type="password" id="custPass" required="required" /><br>
                    <input type="submit" value="Log In" id="custSubmit" /><br>
                </form>
            </td>
        </tr>
    </tbody>
</table>

</body>
</html>

ID 值为 "login" 的 table 用作此处的登录表单。我想在页面中央显示table，我使用了下面的CSS来达到这个目的-

header  {
    text-align : center;
    background : #D3E3E8; 
    font-family : "Cambria", Times, serif;
    font-size: 16px;
}

section {
    text-align : center;
    background : #D3E3E8; 
}

body    {
    padding : 0px;
    margin : 0px;
}

#login  {
    margin: 1em;

    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: center;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: center;

    display: box;
    box-orient: vertical;
    box-align: center;

    border : 1px solid black;
}

#forgotpass {
    text-align : center;
}

th, td  {
    text-align : right;
    padding : 0.5rem;
}

th  {
    font-weight : bold;
    text-align : center;
}

我的问题是框在 Google Chrome 中正确居中显示，但在 Mozilla Firefox 中却不是，它是左对齐的。我知道它与 #login 元素的 CSS 规则有关，但我不知道如何修复它，因为我不太喜欢 HTML/CSS.

这是 JSFiddle Link- https://jsfiddle.net/m2r1ojg4/

如有任何帮助，我们将不胜感激。非常感谢您。

Answer 1

正如user t.niese所指出的，问题可以通过不使用display : box 属性来解决，而是使用这个-

display: -webkit-flex;
display: -moz-flex;
display: flex;

justify-content: center;

元素在 Google Chrome 中居中，但在 Mozilla Firefox 中不居中

Element centered in Google Chrome but not in Mozilla Firefox

html

css

firefox

google-chrome-devtools

flexbox