如何在外部 div 中水平居中响应式 flexbox div

Question

我一直在尝试制作一个简单的响应式 flexbox 布局，其中列环绕，以便它们始终垂直排列。

效果很好：

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

... 除了整个外部 div 向左对齐。我想保持红色项目块的垂直对齐方式，但将整个输出集中在窗口中。

我希望外部 div 上的 display: block; margin: 0 auto; 能够实现这一点，但事实并非如此。有什么想法吗？！

Answer 1

你的内部 div 是全宽的，所以 maring auto 在这里不起作用。您还可以在内部 div 上添加justify-content。

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

这会将所有元素直接定位在内部 div 居中