Html 当前面有一些行时，如何垂直和水平居中引导4行

假设我们有一个主菜单，然后有三行。第一排应该在顶部，第三排在底部。第二行必须垂直和水平居中。
当你向下滚动时，你应该能够隐藏主菜单，但其他所有内容都应该放在页面中

我知道，我知道资源中心，我也和它打过交道。但是我不能把它放在一起。
第二行垂直居中，但它会拉伸高度，并且水平居中不再正确。
以下是我尝试过的：

。垂直中心{
最小高度：100%；
最小高度：100vh；
显示器：flex；
对齐项目：居中；
}
html,body,{
身高：100%；
}
.标题{
浮动：左；
宽度：100%；
}
.满{
身高：100%；
}

JS-Bin




第一排
文本
文本
文本
文本

用

div

将该行中的所有内容包装起来，该div有一个名为

居中的
类。例如，添加相对于父行的位置并添加css类：

.centered{position:absolute; top:50%; left:50%;}

您应该对第二行中的所有div使用“col auto”。
看看这个


。垂直中心{
最小高度：100%；
最小高度：100vh；
显示器：flex；
对齐项目：居中；
}
html,body,{
身高：100%；
}
.标题{
浮动：左；
宽度：100%；
}
.满{
身高：100%；
}

JS-Bin




第一排
文本
文本
文本
文本
这里您使用的是“col-4”文本，请转到代码中的“行对齐资源中心”，然后检查第四部分，您使用的是“col-4”，而我使用的是“col auto”作为第四部分。。。