CODEWITHSUNDEEP
cssflexboxcentering
westernKid
westernKid

Reputation: 173

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

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

Upvotes: 0

Views: 26

Answers (1)

Dennis Spierenburg
Dennis Spierenburg

Reputation: 643

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

Upvotes: 1

Related Questions