Mozilla flexbox 不适用于引导行

Question

我使用的是 bootstrap 3 容器，里面有一个 col-sm-4 和 col-sm-offset-4 用于将表单居中。 我想用 flexbox 将表单垂直居中，它在 Chrome 和 Safari 中工作，但在 mozilla 中，它不起作用。

#login {
height: 100vh;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

}

我上面的容器

我的html代码：

<div class="container" id="login">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-4 centered">
            <div class="well">
                <form action="login.php" autocomplete="off" id="Login_Form" method="post" name="Login_Form">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true" class="fa fa-user fa-fw"></i></span> <input class="form-control" name="Username" placeholder="Nutzername">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i aria-hidden="true" class="fa fa-shield fa-fw"></i></span> <input class="form-control" name="Password" placeholder="Passwort" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary full-width-button" name="Submit" value="Login">Anmelden</button>
                    </div>
                    <table class="errormessage_table">
                        <?php if(isset($msg)){?>
                        <tr>
                            <td class="errormessage"><?php echo $msg;?></td>
                        </tr><?php } ?>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>

like..容器太小了，在 safari 中容器要大很多而且不会被切断

Safari & Chrome Mozilla Firefox

希望有人可以帮助我:)

Answer 1

为了达到您的预期效果，请移除 display:flex

#login {
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

http://codepen.io/nagasai/pen/zBjkWw