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?

George · Accepted Answer · 2019-09-25T17:06:46.760

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'.

almost there i think, if i make the screen smaller, the box is center perfectlly, but if i make it 3-3-2 boxes then the bottom row is also centered, ut they actually should align under box box 1 and column 1 — Jan Van Looveren, Jun 20 '13 at 06:54
@JanVanLooveren So how did you solve the problem of the last row being centered rather than left-aligned in the 3-3-2 case? — matt forsythe, May 13 '14 at 05:00
@mattforsythe What seems to be the issue if you'd like a different alignment you can change `text-align` of `.container`: http://jsfiddle.net/Np4tA/558/ — George, May 13 '14 at 07:31
@oGeez - if you change the alignment of the container - then the divs aren't centered anymore. The OP seems to want 2 things: 1) center divs in container and 2) the last row to be left-aligned — Danield, May 13 '14 at 07:47
@JanVanLooveren I think you are looking for something like this: [How to get tiles centered and left-justified at the same time](http://stackoverflow.com/a/21245751/703717) — Danield, May 13 '14 at 07:49
IF you want the bottom of the 3-3-2 to be left aligned, use `float:left;`, I wanted THIS answer from @George, but couldn't figure out why my 3-3-2 was left aligned until I removed the "float:left;" — BillyNair, May 04 '16 at 14:06

Pete · Answer 2 · 2020-10-06T08:31:51.300

If you change the style on your .block element so that instead of float:left;, you use display:inline-block;, you can then add text-align:center to the .container.

.container {
  height: 300px;
  width: 70%;
  background: #EEE;
  margin: 10px auto;
  position: relative;
  text-align: center
}

.block {
  background: green;
  height: 100px;
  width: 100px;
  margin: 10px;
  display: inline-block;
}

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

score 4 · Answer 3 · edited May 23 '17 at 12:02

So basically your CSS needs these changes

.container { text-align:center; }
.block { display:inline-block; *display:inline; zoom:1; vertical-align:top; }

to make the CSS compatible with IE7.

To align the bottom tiles to the left side, some javascript is needed. Due to .querySelector() backward compatibility the following works everywhere including IE8+; for simplification and IE7 compatibility jQuery is highly recommended:

if (!window.addEventListener) {
    window.addEventListener = function (type, listener, useCapture) {
        attachEvent('on' + type, function () {
            listener(event);
        });
    };
}
window.addEventListener('load', makePaddings, false);
window.addEventListener('resize', makePaddings, false);

function makePaddings() {
    var container = document.querySelector('.container');
    var blocks = document.querySelectorAll('.block');
    var br = [],
        max = 0,
        i = 0;
    var top = blocks[0].getBoundingClientRect().top;
    while (blocks[i] && blocks[i].getBoundingClientRect().top == top) {
        i++;
    }
    var show = blocks.length % i ? i - blocks.length % i : 0; /* how many paddings are needed */
    var paddings = document.querySelectorAll('.padding');
    if (paddings.length < show) { // add missing paddings
        i = show - paddings.length;
        while (i--) {
            var elem = document.createElement('div');
            elem.className = 'padding';
            elem.style.visibility = 'hidden';
            container.appendChild(elem);
        }
        paddings = document.querySelectorAll('.padding');
    }
    for (i = 0; i < paddings.length; i++) {
        paddings[i].style.display = (i < show) ? 'inline-block' : 'none';
    }
}

jsfiddle

score 3 · Answer 4 · answered Apr 07 '17 at 16:08

Now you can use Flexbox property as base for your layouts. This will allow you more control over the child elements.

.container {
    width: 70%;
    background: #EEE;
    margin: 10px auto;
    position: relative;
    display:flex;
    flex-wrap:wrap;
    justify-content: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>

Note: You must need to validate the support and maybe need some vendor prefixes. But as April of 2017 most browsers allow the use.

antelove · Answer 5 · 2017-09-27T15:53:35.377

.container {
  background: lightgrey;
  height: auto;
  width: 70%;

  margin: 10px auto;
  position: relative;
  
  display: flex;
  flex-wrap: wrap;  
  justify-content: space-around;
}
.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>

score -1 · Answer 6 · answered Jun 19 '13 at 10:24

-1

<body>

<div class="container">
       <div style="width:78%; margin:0 auto;">
        <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>
</div>
</body>

Try this div "<div style="width:78%; margin:0 auto;">"

answered Jun 19 '13 at 10:24

sarfaraj

158
6

using inline styles is really a bad practice – It worked yesterday. Jun 19 '13 at 11:05
I know that but just example for that. – sarfaraj Jun 19 '13 at 11:14
1

There's no comparison between CSS declared directly on an element and CSS declared in a stylesheet. Each has its benefits. See http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css – Ultimater Dec 14 '15 at 20:46

How to center multiple divs inside a container in CSS

6 Answers6

Linked