html – 如何居中对齐flexbox容器？

发布时间：2020-12-14 16:37:34 所属栏目：资源来源：网络整理

导读：参见英文答案 How to center a flex container but left-align flex items1个我在代码段显示时成功创建了一个响应式网格. 此刻,我看到盒子左边对齐了. 如何在不使用填充的情况下将容器放在页面的中心？我尝试使用margin：auto但它没有用. .container{ disp

参见英文答案 > How to center a flex container but left-align flex items1个
我在代码段显示时成功创建了一个响应式网格.

此刻,我看到盒子左边对齐了.

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

我尝试使用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.

解决方法

使用justify-content：center;而不是保证金：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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!