Center div boxes in responsive div container

Question

I have 1 Div with width 80% and i want to have Boxes in there but i want them centered every time and doesn't matter what width the outer div has.

.kachel_wrapper {
 margin: auto auto;
 width:80%;
 background:orange;
 min-height:450px;
 margin-top:70px;
}

.kachel {
 height:180px;
 width:180px;
 margin-top:20px;
 float:left;
 margin: auto auto;
 margin-top:15px;
 margin-left:10px;
 background:#6e7176;
 }

<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>

</div>

How can i fix this problem? And get them width centered ?

Flexbox is great for centering, both vertically and horizontally: http://stackoverflow.com/a/33049198/3597276 — Michael Benjamin, Mar 09 '16 at 21:10

score 3 · Accepted Answer · answered Mar 09 '16 at 21:03

Simply display the .kachel divs inline-block and set .kachel_wrapper to text-align:center;:

.kachel_wrapper {
  margin: auto auto;
  width: 80%;
  background: orange;
  min-height: 450px;
  margin-top: 70px;
  text-align: center;
}
.kachel {
  height: 180px;
  width: 180px;
  margin-top: 20px;
  margin-top: 15px;
  margin-left: 10px;
  background: #6e7176;
  display: inline-block;
}

<div class="kachel_wrapper">
  <div class="kachel"></div>
  <div class="kachel"></div>
  <div class="kachel"></div>

</div>

score 0 · Answer 2 · answered Mar 09 '16 at 21:46

I'm not sure if you want the divs centered vertically or horizontally. If you want them centered horizontally go with @Jacob Gray's answer. If you want them centered vertically, remove float: left; from .kachel and add display: block; then to center add margin-left: auto; and margin-right: auto;:

.kachel_wrapper {
  margin: auto auto;
  width: 80%;
  background: orange;
  min-height: 450px;
  margin-top: 70px;
}

.kachel {
  display: block;
  height: 180px;
  width: 180px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  margin-bottom: 10px;
  background: #6e7176;
}

<div class="kachel_wrapper">
  <div class="kachel"></div>
  <div class="kachel"></div>
  <div class="kachel"></div>

</div>

Center div boxes in responsive div container

2 Answers2