Html CSS-对齐项目：居中而不是居中项目

我在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>

---

如果希望将flex子对象水平居中，则需要使用：

justify-content: center;

align-items: center;

---

如果希望将flex子对象垂直居中，则需要使用：

justify-content: center;

align-items: center;

你当然可以两者兼用

---

N.B.如果应用

flex direction:column然后


justify content:center现在将应用于垂直轴

对齐项目：居中现在将应用于水平访问



工作示例：


.gt列{
显示器：flex；
证明内容：中心；
对齐项目：居中；
利润率：18px；
}
.gt-columns.column{
弯曲方向：立柱；
}
.gt col{
宽度：14.3%；
高度：36px；
边框：1px实心rgb（255,0,0）；
}
默认情况下，flexbox父容器的主轴是水平的，并由
对正内容
属性控制。次轴是垂直的，将由
align items
控制。如果您愿意，您可以使用
柔性方向
来翻转。您必须将这些应用于父容器（
.gt列
）

现在，
align items
有时似乎什么都不做。如果父容器折叠到子容器的大小（在您的案例中就是这样），则没有任何东西需要居中：容器和项目具有相同的高度

您没有使用
justif content
，因此忽略了水平轴。我修改了你的代码：

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

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

flex
是此处使用的错误的
display
。你应该使用
display:grid
@VXp我刚生了一个孩子，很抱歉我没有花那么多时间去做一些事情，我没有正确地问我的问题，但是我已经明白了我想要完成的事情。@NiettheDarkAbsol我的4个gt col现在是叠在一起的。