Twitter bootstrap Mozilla flexbox无法使用引导行

我使用的是一个bootstrap3容器，里面有一个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>

户口

比如说……这个容器太小了，在狩猎中，这个容器要大得多，而且不会被切断

---

希望有人能帮助我：）

为了达到您的预期效果，请删除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;
}

---

请分享您的HTML代码我添加了HTML代码。感谢您快速回复：）只需在行中添加col-xs-12，因为父div显示是flex，它会改变行为。我尝试过这个方法，但我希望容器较小，这就是为什么我使用col-sm-4，如果我编写col-xs-12，表单将是整个页面。。。如果可能的话，我希望它和Safari&Chrome屏幕截图上的一模一样。我已经创建了代码，但无法复制这个问题——到目前为止，它在所有浏览器中都能正常工作，至少它不再被切断。现在我怎样才能使整个形状垂直居中？safari和chrome已经居中，firefox看起来不错，但仍然保持在顶部。有什么想法吗？谢谢：）谢谢你！这对我很有用，非常感谢你的帮助：）