如何在CSS网格中进行垂直居中的单行布局？

我正在尝试使用CSS网格进行单行、垂直居中的布局。这是一个粗略的草图：

注:

• 我只有一行物品
• 项目（可能）将是相同的宽度
• 我不知道我有多少东西（所以我不想说‘200px’八十遍）
• 项目的高度不同，但需要垂直居中

HTML:

我已经试过了，但它真的想做多行而不是一行多列

---

我可以在CSS网格中进行单行垂直居中布局吗？如果是，怎么做？

下面是一个工作示例。它的工作原理与另一个答案一样好，但是使用不同的CSS来避免显式设置网格行。单击下面的“运行”：

• 网格自动流：列使项目跨列流动，即进入一行

• 自对准：居中是否垂直居中

.wrapper{
显示：网格；
网格自动流：列；
}
.盒子{
自对准：居中；
}
/*下面是其他样式*/
.包装纸{
栅隙：10px；
背景色：#fff；
颜色：#444；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
身体{
利润率：40像素；
}
.盒子{
高度：200px；
}
.方框b{
高度：20px；
}
.方框c{
高度：120px；
}

A.
B
C
D

要强制将所有项目放入一行，请将它们设置为

网格行：1

要使项目居中，请将容器设置为

align items:center

，或将每个项目设置为

align self:center

。（

align self

默认继承

align items

值）

.wrapper{
显示：网格；
对齐项目：居中；/*新建*/
}
.盒子{
网格行：1；/*新*/
}
.box.a{高度：200px；}
.box.b{高度：20px；}
.box.c{高度：120px；}
.box.d{高度：50px；}
/*非基本装饰风格*/
.包装纸{
栅隙：10px；
背景色：#fff；
颜色：#444；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
身体{
利润率：40像素；
}

A.
B
C
D

<div class="wrapper">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
</div>

.wrapper {
    display: grid;
    grid-gap: 10px;
    grid-auto-columns: 200px;
    background-color: #fff;
    color: #444;
    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
    }
}