Align to center child DIVs inside parent DIV - html

Question

I'm trying to align a DIV in the middle of the page when the size is less than 768px
I have one parent DIV that contains three different DIVs. So I used media queries and within one display size I added this "clear:both" to the display_type and buttons classes. So in that way each div will be in its own row.
<div class="category_header container">
<div class="products">
<label class="header t_left">Sorter efter:</label>
<div class="select t_left">
</div>
<div class="display_type">
<ul class="clearfix">
<li></li>
<li></li>
</ul>
</div>
<div class="buttons">
<span class="button"></span>
<span class="button"></span>
</div>
</div>
</div>
Then I tried several ways to align them in the center but they didn't work. Here what the CSS looks like:
.container {
width: 1180px;
margin: 0 auto;
padding: 0;
}
.category_header {
margin-top: 30px;
margin-bottom: 30px;
padding: 0 0 0 25px;
}
.products {
float: left;
width: 350px;
margin: 3.5px 0 0;
}
.products label {
margin: 0 30px 0 0;
line-height: 40px;
height: 40px;
display: block;
}
.display_type {
float: left;
width: 350px;
color: #A1ABB6;
margin: 12px 0 0;
}
.category_header .buttons {
float: right;
width: 427px;
}
I tried to add the following to the parent div "category_header" with no luck. I also tried the same to the child divs. I found a lot of solutions on google but noone seems to work. (display: inline-block; text-align: center etc etc)
#media screen and (max-width: Number px) and (min-width: Number px)
{
.category_header {
margin: 0 auto;
width: 50%;
}
}
Can anyone help me with this? Thanks

Answer 1

try this:
#media screen and (max-width: 768px)
{
.display_type, .buttons, .products
{
float:none;
margin:auto;
}
}