<div class="login light">
    <div class="login-wrapper">
        <div class="logo-wrapper">
            <img src="images/logo.jpg" />
        </div>
        <form>
            <div class="form-group">
                <label class="control-label" for="email">Username:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label class="control-label" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <ul class="actions">
            <li>
                <a>Forgot password ?</a>
            </li>
            <li>
                <a>Not a member ? Sign Up</a>
            </li>
        </ul>
    </div>
</div>

-------------------------------- CSS --------------------------------------------
.login {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9;
  background-color: #313339;
  text-align: center;
  overflow: auto;
}
.login .login-wrapper {
  width: 500px;
  margin: 0 auto;
  padding: 32px 64px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.login .login-wrapper img {
  max-width: 150px;
  width: 100%;
}
.login .login-wrapper form .form-group {
  text-align: left;
}
.login .login-wrapper form .form-group label {
  color: #313339;
}
.login .login-wrapper form .form-group .form-control {
  height: 40px;
}
.login .login-wrapper form button {
  margin-top: 24px;
  padding: 8px;
  display: block;
  width: 100%;
  font-size: 18px;
}
.login .login-wrapper .actions {
  padding: 0;
  display: table;
  width: 100%;
}
.login .login-wrapper .actions li {
  display: table-cell;
  text-align: left;
}
.login .login-wrapper .actions li a {
  display: block;
  color: #313339;
  font-weight: 500;
  margin-top: 8px;
  font-size: 13px;
}
.login .login-wrapper .actions li:last-child {
  text-align: right;
}
.login .login-wrapper .actions li:last-child a {
  color: #7c7c7c;
  font-weight: 400;
}
.login.light {
  background-color: #edf0f5;
}
.login.light .login-wrapper form .form-group label {
  color: #313339;
}