Bootstrap - Vertical align Login box with background image - css

Question

I'm using the following code to display a login box with bg image.
body {
background: url(http://lorempixel.com/1920/1920/city/9/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.panel-default {
opacity: 0.9;
margin-top:30px;
}
.form-group.last {
margin-bottom:0px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-7">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-lock"></span> Login</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">
Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">
Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"/>
Remember me
</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm">
Sign in</button>
<button type="reset" class="btn btn-default btn-sm">
Reset</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
Not Registred? Register here</div>
</div>
</div>
</div>
</div>
I was able to align it horizontally using the below code
col-md-4 col-md-offset-4
Here, the top margin set in CSS doesn't look good in mobile devices since it is not center aligned. I want the login box to be vertically centered and I've tried various solutions such as using display: flex etc but none worked in this case.
Could you help me?
Thanks.

Answer 1

Firstly you have to say that your container should take 100% height of the body
which can be done with
.container{
height: calc(100vh);
}
After that you can keep display:table to parent div and display:table-cell to child div along with vertical-align: middle which will give you vertically align center
check this fiddle
In your code I have changed
HTML:
<div class="row login-box">
CSS:
.container{
height: calc(100vh);
display: table;
table-layout: fixed;
width: 100%;
}
.login-box{
display: table-cell;
width: 100%;
vertical-align: middle;
}

Answer 2

You can use CSS Flexbox. You also need to define height: 100vh for the body and make it flex container.
Like:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
Have a look at the snippet below (use full page view) :
body {
background: url(http://lorempixel.com/1920/1920/city/9/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.panel-default {
opacity: 0.9;
margin-top:30px;
}
.form-group.last {
margin-bottom:0px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-lock"></span> Login</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">
Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">
Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox"/>
Remember me
</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm">
Sign in</button>
<button type="reset" class="btn btn-default btn-sm">
Reset</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
Not Registred? Register here</div>
</div>
</div>
</div>
</div>
Hope this helps!