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

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

html css firefox google-chrome-devtools

Html 元素在Google Chrome中居中，但在Mozilla Firefox中不居中,html,css,firefox,google-chrome-devtools,flexbox,Html,Css,Firefox,Google Chrome Devtools,Flexbox,我正在尝试一个简单的个人项目登录页面，一个问题跟踪应用程序。下面是登录页面的HTML代码- <!Doctype html> <html> <head> <title>All Issues</title> <meta http-equiv="content-type" charset="utf-8" content="text/html"/> <link rel="stylesheet" href

我正在尝试一个简单的个人项目登录页面，一个问题跟踪应用程序。下面是登录页面的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>

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

这是JSFIDLE链接-

任何帮助都将不胜感激。非常感谢您。

正如所指出的，可以通过不使用

display:box

属性来解决此问题，而使用此属性-

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

justify-content: center;

我不知道你想达到什么目的。我看到Firefox和Chrome的渲染略有不同，但在我看来，

#login

元素在这两个元素中水平居中。此外，如果可能，尽量避免使用

-webkit-

和

-moz-

属性。如果你试图使用最前沿的功能，它们是很好的，但本质上它们是不可持续的，因为它们是特定于浏览器的，支持最终会被放弃。

display:box

是flexbox旧模块的过时属性，与

框对齐

和

框定向

相同。您应该使用

display:flex

和

justify content:center

来代替。@t.niese-谢谢！！那起作用了。。。

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

justify-content: center;