Bootstrap div- align to center of page - html

Question

I'm trying to center a col-span-6 div to the center of the page using Twitter Bootstrap 3. Unfortunately, nothing I do is working. I used Firefox developer tools to discern the issue was most likely stemming from the fact that the col-span-6 class was floated left. Therefore, I added a style="float: none !important;" to the col-span-6 element, but that did nothing.
Help!!
<div class="panel-group col-sm-6" style="float: none;">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>

Answer 1

I'm not sure but it seems to me that you wanted to achieve this effect:
.super-center {
margin: 0 auto !important;
float: none !important;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="super-center panel-group col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
It was enough to add to your div's: margin: 0 auto;

Answer 2

You can align a div to center of the page using the CSS. Following CSS works for me. You can try using this CSS.
.col-sm-6 {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 3px;
text-align: center;
}
<div class="panel-group col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>

Answer 3

You can use display: flex for this to handle alignment in a easier way. I have done a sample code below. Hope it helps you
HTML
<div class="panel-group col-sm-6">
<div class="panel panel-default d-flex h-100">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
CSS
.d-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.h-100 {
height: 100vh !important;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/bhgx3yzv/

Answer 4

Use column offset with "col-sm-6" to make it in center. Here is an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group col-sm-6 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
It automatically push the column in center.