Bootstrap - Vertical align Login box with background image

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? <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.

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