html - 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>

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>