Bootstrap Center a Div in the Middle - html

Question

I have a div here which contains 3 dropdowns:
<div class="text-center container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="makein">
<li>bmw</li>
<li>mercedes</li>
<li>mazda</li>
<li>ford</li>
<li>lada</li>
<li>audi</li>
<li>skoda</li>
<li>fiat</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="yearin">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="levelin">
<li>luxury</li>
<li>ordinary</li>
</ul>
</div>
</div>
I use the following to center the div in the middle of the screen centered:
.container{
width: 300px;
height: 300px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.dropdown{
display: inline-block;
}
It also aligns my drop downs horizontally.
I locate my div in the middle of the screen using this custom css. I am wondering if there is a way to avoid using the custom css and do this same thing just purely using Bootstrap.
My aim is:
1: Locate the container in the center in the middle of the page.
2: Horizontally align the dropdowns.

Answer 1

Bootstrap shipped with container and text-center classes then why you are defining your own container class? Just include bootstrap files properly in your code and no need for this custom CSS.
text-center class will align your drop down in middle of screen and container class has fixed width with auto margin. Check jsFiddle

Answer 2

To achieve expected result , use below CSS to container
.container{
width: 300px;
height: 60%;
position: absolute;
top:20%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
http://codepen.io/nagasai/pen/LkoLGw

Answer 3

There are no way in bootstrap to locate div in the middle of the screen.
you may check below custom css code:
.container {
position: absolute;
width: 100%;
top: 45%;
}
.dropdown {
display: inline-block;
}