I am using a bootstrap 3 container, inside there is a col-sm-4 and col-sm-offset-4 for centering the form inside. I'd like to vertically center the form with flexbox, it's working in Chrome & Safari, but with mozilla, it's not working.
#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;
}
my Container above
My html code:
<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..the container is so small, in safari the container is a lot bigger and not cut off
Safari & Chrome Mozilla Firefox
Hope someone can help me :)
To achieve your expected result remove 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;
}