javascript - 水平居中 4 列列表

Question

我正在尝试将列水平居中，并尝试通过引导列来实现，但我很难将没有完整行的列居中。我更喜欢使用 flexboxes 来处理这个问题，但我也对其他解决方案持开放态度。

努力完成:

我尝试了几种不同的方法，其中一种是 ( jsfiddle)。这很接近，但想知道是否有一种方法可以从中心开始新行，直到它出来？

我目前拥有的代码:

HTML

<div class="list">
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
    <div class="col-3 mx-auto">
        <div class="card card-body mb-2">
            <h6>I'm .col-4</h6>
        </div>
    </div>
</div>

CSS:

.landing-types .content-list .list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.landing-types .content-list .list .col-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.landing-types .content-list .list .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

Answer 1

是的，有。简单地包装 flexboxes 并使用 justify-content: center(水平居中对齐)和 align-items: center(垂直居中对齐)。

这是一个最小的工作示例:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.column {
  width: 13%; /* Change this value to experiment */
  padding: 20px;
  margin: 20px;
  text-align: center;
  background: #000;
  color: #FFF;
}

<div class = "column">
  1
</div>
<div class = "column">
  2
</div>
<div class = "column">
  3
</div>
<div class = "column">
  4
</div>
<div class = "column">
  5
</div>
<div class = "column">
  6
</div>
<div class = "column">
  7
</div>
<div class = "column">
  8
</div>
<div class = "column">
  9
</div>
<div class = "column">
  10
</div>
<div class = "column">
  11
</div>
<div class = "column">
  12
</div>

如果你还没有，你需要阅读这个关于 flexbox 的指南:here

这与 flexbox 无关，但我建议您阅读有关网格的内容:here