Html 需要帮助将项目垂直居中于列中的左侧空间吗

我有两个专栏。第一列包含若干项。我希望最后一项在剩余的空白处垂直居中

例如，如果左栏高4英寸，包含3个项目，前两个项目占据顶部2英寸，则最后一个项目将垂直居中于底部2英寸

为了做到这一点，我第一次尝试使用FlexBox，但失败得很惨。我可以将整个左列垂直居中（如果我将align items:center；放在.row下），但我无法通过将align items:center；在.lastitem下

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.lastitem{
    align-items: center;
}

非常感谢您的帮助

---

补充：对不起，我不知道如何共享相关代码。这里有一个指向有问题的测试页面的链接：njfilmschool.com/homenew4.php我所做的一切就是让“月桂图片”垂直居中于Instagram提要下方和页脚线上方。但由于页面是动态生成的，因此空空间的大小会发生变化。看起来FlexBox应该让我这么做，但我所做的对图像没有影响

如果您准备好展示整个代码，我可以建议您使用flexbox解决方案。您可能缺少

.lastitem

上的

display:flex

，因此DOM没有呈现

align items:center

此时，我有一个嵌套的解决方案，如下所示：

.container{
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（2，1fr）2fr；/*此处1英寸-1英寸-2英寸为分数*/
栅柱间隙：10px；
网格行间距：10px；
背景：#6A67CE；
填充：15px；
}
.1分部{
网格区域：1/1/2/2；/*从第1行开始，在第2行结束，从第1列开始。在第2列结束*/
}
.第2分部{
网格面积：2/1/3/2；
}
.第3分部{
网格面积：3/1/4/2；
显示：网格；
/*嵌套网格*/
对齐项目：居中；
}
/*代码段样式*/
.container>div{
背景#5548B0；
文本对齐：居中；
颜色：#fff；
字体大小：36px；
填充：15px；
}

1.
2.
3.

您只想使用flexbox还是同时使用open to other solutions？欢迎使用Stack Overflow u请将您的HTML插入问题中u这将使您更有可能得到有助于解决问题的答案issue@ManojKumar,我对其他解决方案持开放态度。@Chris Messineo您需要上传html代码。在您的网页上，您只需（1）将

display:flex

添加到

#Left

，以及（2）将

margin:auto

添加到

。njfslaurel

。还有很多不必要的代码可以删除，但似乎没有造成问题。对不起，我不知道如何共享相关代码。这里有一个指向问题测试页面的链接：我所做的一切都是使“劳雷尔图像”垂直居中于Instagram提要下方和页脚线上方。但由于页面是动态生成的，因此空空间的大小会发生变化。看起来FlexBox应该让我这样做，但我所做的对图像没有影响。请查看Michael对您的问题的评论。