如何在 Flex Parent Div 中将子 Div 居中？ [复制]答案

【问题标题】：How To Center Child Divs In Flex Parent Div? [duplicate]如何在 Flex Parent Div 中将子 Div 居中？ [复制]
【发布时间】：2020-09-05 07:02:07
【问题描述】：

我有一个名为预设页面的 html 页面。此页面包含不同的（子）div，我很难将所有这些 div 集中在容器（父）div 中。这些预设 div 当前位于 flexbox 中。抱歉，如果这个问题已经得到解答，我真的很讨厌在 html/css 中居中元素。

目前看起来像this。

我希望它看起来有点像this。

我尝试使用justify-content: center，但如何使最后一行左/右对齐，看起来像this？

这是 HTML：

<div class="presets-container">
  {% for presets in presets_list %}
  <div class="preset">
    <div class="container">
      <div class="row" id="header">
        <div class="col-7">
          <h1>{{ presets.preset_name|hide_preset_suffix }}</h1>
        </div>
        <div class="col-5">
          <div class="options">
              <div style="cursor:pointer;" class="button pr_edit" id="{{ 'load,'|create_id:forloop.counter }}" onclick="loadPreset(this.id)">LOAD</div>
              <div style="cursor:pointer;" class="button pr_edit" id="{{ 'delete,'|create_id:forloop.counter }}" onclick="deletePreset(this.id)">DELETE</div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endfor %}
</div>

这是预设容器的 CSS：

.presets-container{
  background-color: pink;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

【问题讨论】：

请将您的代码添加到问题中
水平居中justify-content: center和垂直居中align-items: center，flex-direction的默认值是row所以你不需要指定
您好，看到您的屏幕截图后，您的要求是在内容周围添加相等的边距，因此请使用justify-content: space-around

标签： html css flexbox centering

【解决方案1】：

您可以使用justify-content: center

【讨论】：

如何让最后一行左对齐而不是居中？检查上次编辑:)
不幸的是，这是一个未解决的问题 ;-) ，即不容易。您必须在容器中使用一个容器，该容器的宽度仅足以容纳三列，并且您在其父项中居中（使用默认的justify-content: flex-start） - 通常太复杂了......

【解决方案2】：

将justify-content: center和align-items: center添加到父div

.presets-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: pink;
  justify-content: center;
}

【讨论】：

【解决方案3】：

只需在presets-container 下添加div，然后在presets-container 中使用justify-content: center

【讨论】：