如何居中对齐 flexbox 容器？ [复制]

Posted 2023-03-05

【中文标题】如何居中对齐 flexbox 容器？ [复制]

【英文标题】：How to center align a flexbox container? [duplicate]

【发布时间】：2016-12-18 04:11:28

【问题描述】：

我成功创建了一个响应式网格，如 sn-p 所示。

目前，我看到方框向左对齐。

如何在不使用填充的情况下将容器放在页面中心？

我尝试使用margin:auto，但没有成功。

.container
    display:flex;
    flex-wrap:wrap;
    text-align:center;
    margin:auto;

.box
    width:100%;
    max-width:30%;
    border:1px solid red;
    margin:5px;

@media only screen and ( max-width:768px )	
    .box
        width:100%;
        max-width:40%;
        border:1px solid red;
    

<section class="container">
    <div class="box">
        <h1>This is the first box</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
    </div>
</section>

JS Fiddle.

【问题讨论】：

为你的容器类添加宽度

要使用margin:auto，您的容器必须有width。

我在容器中添加了 100% 的宽度，但没有效果。这里是我的 sn-p：jsfiddle.net/cx1svoky/3

以 px 为单位给出宽度，例如 500px

@chirag。我实际上尝试了 1000px，但它并没有真正居中。

【参考方案1】：

使用justify-content: center; 代替margin: auto;：

.container 
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;

.box 
   width: 100%;
   max-width: 30%;
   border: 1px solid red;
   margin: 5px;

@media only screen and (max-width: 768px)  
  .box 
    width: 100%;
    max-width: 40%;
    border: 1px solid red;
  

见justifiy-content docs on MDN。

Updated JS Fiddle.

【讨论】：

完美居中。但我只是注意到第四个框现在没有浮动到左边。这个想法是从左边添加框以便随着更多文章的出现而写。例如，如果我有 7 个盒子，第七个盒子应该流向左侧而不是中心。希望我说得有道理。

@WosleyAlarico 然后你可以使用固定宽度的margin: 0 auto;，例如width: 800px;。见JS Fiddle。

它不像我之前在其他 cmets 中提到的那样真正居中。但好吧，这似乎是唯一的选择。

【参考方案2】：

只需将此行添加到您的原始代码中：

.container
  width: 100%

并将div 框放入另一个具有margin: auto; 的div

如果您需要在同一行中添加 2 个框，请将 display: inline-table; 添加到 box 类中

【讨论】：

介意送个小提琴吗？

【参考方案3】：

使用margin:0px auto; 和width。

例如：

.container

display:flex;
flex-wrap:wrap;
text-align:center;
margin:0px auto;
width: 400px;

【参考方案4】：

因此，如果您希望从左到右添加框，并且下一行的第一个框左对齐，您可以使用：`

.container 
  display:flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 0 auto;
  border: 1px solid red;

.container:after 
  content: "";
  flex: auto;

Fiddle

【讨论】：

这不会使 flexbox 容器居中