需要帮助在列中左侧的空间中垂直居中项目

Question

我有两列。 第一列包含多个项目。 我希望最后一项在剩余的空白空间中垂直居中。

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

为此，我第一次尝试使用FlexBox，但惨遭失败。 我能够垂直居中整个左列(如果我把对齐项目：中心;在 .row 下(，但我无法通过放置对齐项目：中心来让它工作;在 .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 应该让我这样做，但我正在做的是对图像没有影响。

Answer 1

如果您准备好显示整个代码，我可以向您推荐一个flexbox解决方案。可能您在.lastitem上缺少display: flex，因此 DOM 未呈现align-items: center。

目前，我在下面有一个嵌套的CSS网格解决方案：

.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 2fr; /* One inch - One Inch - Two Inch Inches are fractions here*/
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #6A67CE;
padding: 15px;
}
.div1 {
grid-area: 1 / 1 / 2 / 2; /* Start at Row1, end at Row2, Start at Col1. end at Col2 */
}
.div2 {
grid-area: 2 / 1 / 3 / 2;
}
.div3 {
grid-area: 3 / 1 / 4 / 2;
display: grid;
/* Nested Grid */
align-items: center;
}
/* Snippet styling */
.container > div {
background: #5548B0;
text-align: center;
color: #fff;
font-size: 36px;
padding: 15px;
}

<div class="container">
<div class="div1"> 1 </div>
<div class="div2"> 2 </div>
<div class="div3"> 3 </div>
</div>