How to Center Multiple Divs Inside a Container in CSS

Center multiple divs in another div?

Here's an alternate method if you can use an extra div:

<div class = "container">
  <div class="centerwrapper">
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
    <div class = "square">...</div>
  </div>
</div>

<style>
    .square
    {
        float: left;
        margin:1pt;
        width:72pt;
        height:72pt;
    }
    .container
    {
        text-align:center;
        width:450pt;
        height: 80pt;
    }
    .centerwrapper
    {
       margin: auto;
       width: 302pt;
    }
</style>

Also, make sure you have a closing quote on your <div class = "container"> there. The code you pasted is missing one.

How to center multiple divs inside a container in CSS

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>

How to center multiple div elements within a parent div?

You can simply put text-align:center; on your div.box-collective class.

div.box-collective {    background-color: grey;    width: 100%;    text-align:center;}
div.box {    width: 100px;    height: 100px;    border: 1px solid black;    display: inline-block;    margin: 10px;}

<div class="container">  <h1>My boxes</h1>
    <div class="box-collective">      <div class="box"></div>      <div class="box"></div>      <div class="box"></div>      <div class="box"></div>      <div class="box"></div>    </div></div>

Centering multiple divs

Try CSS flexbox:

.container {  display: flex;  justify-content: center; /* align items horizontally (in this case) */  align-items: center;     /* align items vertically (in this case) */  border: 2px solid black;}.desc_img {  margin: 5px;}

<div class="container desc">  <div class="desc_img">    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="Sample Image">  </div>  <div class="desc_img">    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="Sample Image">  </div>  <div class="desc_img">    <img src="http://i.imgur.com/60PVLis.png" height="50" width="50" alt="Sample Image">  </div></div>

Center multiple divs inside another div

Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.

---

Related Topics