Ajay Ajay - 17 days ago 11
CSS Question

Bootstrap - Vertical align Login box with background image

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? <a href="http://www.jquery2dotnet.com">Register here</a></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.

zan zan
Answer

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;
 }
Comments