How to center a responsive flexbox div horzontally within an outer div

Question

I have been trying to make a simple responsive flexbox layout in which columns wrap so that they always line up vertically.

That works fine:

  .outer {
                margin: auto auto; /* Not centering contents of .inner div */
            }
            .inner {
                display: flex;
                flex-wrap:wrap;

            }

            .inner .item {
                
                width: 205px; 
                height: 180px; 
                background: red; 
                margin: 10px; 
            }
            
            .item {
                
            }

<div class="outer">
    <div class="inner">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
        <div class="item">22</div>
        <div class="item">23</div>
        <div class="item">24</div>
        <div class="item">25</div>
        <div class="item">26</div>
        <div class="item">27</div>
        <div class="item">28</div>
        <div class="item">29</div>
        <div class="item">30</div>
    </div>
</div>

... except that the whole outer div is aligned to the left. I want to keep the vertical alignment of the red item blocks as it is but center the whole output in the window.

I expected display: block; margin: 0 auto; on the outer div to achieve this but it doesn't. Any ideas?!

simply because there is nothing to center, your content is full width .. you can only center the flex items — Temani Afif, Jul 05 '18 at 10:48
So what to do? I tried adding `width`s to both the inner and outer divs but that doesn't work. — westernKid, Jul 05 '18 at 10:53
You can also try with `.item { position: absolute; transform: translate(-50%, -50%); margin: auto; bottom: 0; right: 0; left: 0; top: 0; }` — Ustym Ukhman, Jul 05 '18 at 10:57
what you want is not possible, explained here : https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Temani Afif, Jul 05 '18 at 11:14
I guess I'll have to go with the `justify-content:center` on the `inner` solution although it's not quite what I had pictured. I'll mark that as the answer. — westernKid, Jul 05 '18 at 11:24

score 1 · Accepted Answer · answered Jul 05 '18 at 10:56

Your inner div is full width so maring auto won't work here. You can also add a justify-content on the inner div.

  .outer {
            }
            .inner {
                display: flex;
                flex-wrap:wrap;
              justify-content: center;
            }

            .inner .item {
                
                width: 205px; 
                height: 180px; 
                background: red; 
                margin: 10px; 
            }
            
            .item {
                
            }

<div class="outer">
    <div class="inner">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
        <div class="item">22</div>
        <div class="item">23</div>
        <div class="item">24</div>
        <div class="item">25</div>
        <div class="item">26</div>
        <div class="item">27</div>
        <div class="item">28</div>
        <div class="item">29</div>
        <div class="item">30</div>
    </div>
</div>

This will position all the elements directly in the inner div centered

Thanks, but that's not what I want. With that layout the bottom row of divs does not line up: https://gyazo.com/eecce84b3416b93bf2ebda3a68703416 - I want it all centred with the red blocks all lining up vertically: https://gyazo.com/995d2343badaaca747aefadcb5169ec1 — westernKid, Jul 05 '18 at 11:10

How to center a responsive flexbox div horzontally within an outer div

1 Answers1