如何在Flex父Div中居子Div的中心？

Question

我有一个称为预设页面的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;
}

Answer 1

您可以使用justify-content: center

Answer 2

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

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