How to center multiple divs inside a container in CSS

Question

I am testing to center divider like the style of windows metro.

.container {     height: 300px;     width: 70%;     background: #EEE;     margin: 10px auto;     position: relative; } .block {     background: green;     height: 100px;     width: 100px;     float: left;     margin: 10px; }

<div class="container">   <div class="block">1. name of the company</div>   <div class="block">2. name of the company</div>   <div class="block">3. name of the company</div>   <div class="block">4. name of the company</div>   <div class="block">5. name of the company</div>   <div class="block">6. name of the company</div>   <div class="block">7. name of the company</div>   <div class="block">8. name of the company</div> </div>

The grey box is 70% and centering on the screen that is correct, but when I make the window wider and the green dividers are moving, you can see that the green boxes at some point are not centered.

How can help me on this one?

Answer 1

My previous answer showed a frankly outdated method (it still works, there are just better ways to achieve this). For that reason, I'm updating it to include a more modern, flexbox solution.

See support for it here; in most environments, it's safe to use.

This takes advantage of:

• display: flex: Display this element with flexbox behaviour
• justify-content: center Align the inner elements centrally along the main axis of the container
• flex-wrap: wrap Ensure the inner elements automatically wrap within the container (don't break out of it)

_{Note: As is usual with HTML & CSS, this is just one of many ways to get the desired result. Research thoroughly before you choose the way that's right for your specifications.}

.container {      display: flex;      justify-content: center;      flex-wrap: wrap;      width: 70%;      background: #eee;      margin: 10px auto;      position: relative;      text-align:center;  }    .block {      background: green;      height: 100px;      width: 100px;      margin: 10px;  }

<div class="container">      <div class="block">1. name of the company</div>      <div class="block">2. name of the company</div>      <div class="block">3. name of the company</div>      <div class="block">4. name of the company</div>      <div class="block">5. name of the company</div>      <div class="block">6. name of the company</div>      <div class="block">7. name of the company</div>      <div class="block">8. name of the company</div>  </div>

---

Original Answer

You could apply the style text-align:center; to your container and display your .blocks as inline-block elements:

.container {    width: 70%;    background: #eee;    margin: 10px auto;    position: relative;    text-align:center;  }    .block {    background: green;    height: 100px;    width: 100px;    display:inline-block;    margin: 10px;  }

<div class="container">               <div class="block">1. name of the company</div><!--       --><div class="block">2. name of the company</div><!--       --><div class="block">3. name of the company</div><!--       --><div class="block">4. name of the company</div><!--       --><div class="block">5. name of the company</div><!--       --><div class="block">6. name of the company</div><!--       --><div class="block">7. name of the company</div><!--       --><div class="block">8. name of the company</div>  </div>

Here's an updated Fiddle

Notice I've commented out the white-space between your <div>s. Because the elements are now displayed inline, your spaces will be acknowledged. This is one of many ways to 'fight the space'.