Put a Bootstrap 3 div inside a centered div to center - html

Question

I have a code like this-
html, body, .container-table {
height: calc(100% - 50px);
}
/*Making a div in center*/
.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>
So, I am getting a output like this-
But I want to have it like this-
Can anyone please help?
Re-
This Question-
Centering Login Form Bootstrap
Is not a solution for my problem, because if u run the codes given and read the requirements, then u can easily find this.
More- My problem is not centering a div, My problem is centering a div inside of a div which is already centered horizontally and vertically.

Answer 1

Add col-md-offset-3 to the first element of a row in your form
All bootstrap tables have 12 columns -> your form's width is 6 cells -> so you have 6 cells left -> push your form 3 cells and you have 3 on each side
html,
body,
.container-table {
height: calc(100% - 50px);
}
/*Making a div in center*/
.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 col-md-offset-3">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 col-md-offset-3">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-5 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>

Answer 2

try
.container-table
{
display: table;
margin: 0 auto;
}

Answer 3

Why don't you simply simply use bootstrap columns ?
With this way the alignment of text and button inside your login div won't be affected, and you don't need any extra CSS :
<div class="container row">
<div class="col-md-4"></div>
<div class="col-md-4">
Your login form HTML here ...
</div>
<div class="col-md-4"></div>
</div>

Answer 4

Please try this:
Put you button inside a div like:
<div class="row">
<button name="remember_me" type="submit" class="center-block btn btn-primary">Sign in</button>
</div>
and assign text-align:center to that div.

Answer 5

html,
body,
.container-table {
height: calc(100% - 50px);
}
body{top:50%;}
/*Making a div in center*/
.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">
<div class="col-md-10 col-md-offset-1">
<h2 class="text-center">Login</h2>
</div>
<div class="col-md-10 col-md-offset-1">
<form action="login.html" class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-2" for="inputEmail">Email</label>
<div class="col-md-8">
<input type="email" required="" placeholder="Email" class="form-control" name="email">
</div>
</div>
<div class="form-group">
<label class="text-center control-label col-md-2" for="inputPassword">Password</label>
<div class="col-md-8">
<input type="password" required="" placeholder="Password" class="form-control" name="password">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-8">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div>
<div class="col-md-10 col-md-offset-1">
<button class="center-block btn btn-primary" type="submit" name="remember_me">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>