Mozilla flexbox가 부트 스트랩 행과 함께 작동하지 않습니다.

Question

부트 스트랩 3 컨테이너를 사용 중입니다. 내부에 양식을 센터링하기위한 col-sm-4 및 col-sm-offset-4가 있습니다. 저는 flexbox로 양식의 중심을 맞추고 싶습니다. 크롬에서는 & 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> 

훨씬 더 크고하지 절단 off

Safari & Chrome Mozilla Firefox

희망 누군가가 나를 도울 수 :

Answer 1

이 예상 된 결과가 표시를 제거 달성하기 :

#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