html - CSS - align-items：居中不居中项目

Question

我在 1 个元素中有 4 个元素，如下所示：

<div class="gt-columns gt-columns-center">

<div class="gt-col"></div>
<div class="gt-col"></div>
<div class="gt-col"></div>
<div class="gt-col"></div>

</div>

我试图将 4 gt-col 居中在 gt-columns 内。我将对齐项目设置为居中，但没有居中。我究竟做错了什么？这是我的CSS：

.gt-columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px -30px;
}

.gt-columns.gt-columns-center {
    align-items: center;
}

.gt-col {
    width: 14.28571428571429%;
}

标签： htmlcss

Answer 1

如果你希望你的 flex-children水平居中，你需要使用：

justify-content: center;

如果你希望你的 flex-children垂直居中，你需要使用：

align-items: center;

您当然可以同时使用两者。

---

注意如果你申请flex-direction: column;那么

• justify-content: center;现在将应用于垂直轴
• align-items: center;现在将应用于水平访问

---

工作示例：

.gt-columns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 18px;
}

.gt-columns.column {
    flex-direction: column;
}

.gt-col {
    width: 14.3%;
    height: 36px;
    border: 1px solid rgb(255, 0, 0);
}

<div class="gt-columns gt-columns-center">
  <div class="gt-col"></div>
  <div class="gt-col"></div>
  <div class="gt-col"></div>
  <div class="gt-col"></div>
</div>

<div class="gt-columns gt-columns-center column">
  <div class="gt-col"></div>
  <div class="gt-col"></div>
  <div class="gt-col"></div>
  <div class="gt-col"></div>
</div>