I have written a code snippet that looks like this-
html, body, .container-table {
height: calc(100% - 50px);
}
/*Centering a div*/
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container container-table">
<!-- Main div to hold all Data -->
<!-- Login Form -->
<div class="row vertical-center-row">
<h2 class="text-center">Login</h2>
<form class="form-horizontal" action="login.html">
<div class="form-group">
<label for="inputEmail" class="control-label col-md-2">Email</label>
<div class="col-md-4">
<input name="email" type="email" class="form-control" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="text-center control-label col-md-2">Password</label>
<div class="col-md-4">
<input name="password" type="password" class="form-control" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</form>
</div>
</div>Currently, the output I am getting looks like this-
https://i.sstatic.net/Kcptq.jpg
But my desired outcome should look more like this-
https://i.sstatic.net/Y0KcG.jpg
If anyone could lend some assistance, it would be greatly appreciated.
Response-
This specific query-
Centering Login Form Bootstrap
Does not entirely solve my issue, as if you were to implement the provided codes and understand the requirements, you will see why this is the case.
Additionally- My challenge does not revolve around centering just any div, but rather centering a div within another div that has been horizontally and vertically centered already.