Html Flexbox，带中央valign，允许扩展内容

首先，下面的第一个片段是我试图解决的问题

请注意，如果

display:flex，那么它工作得非常好应用于
主体

但是，我不想将样式应用于
正文
，这将破坏Google Web缓存布局

*在第一个代码片段之后有更多的解释


*{框大小：边框框；}
正文{页边距：0；}
.包装纸{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
宽度：100%；
背景色：#ccc；
}
.导航{
背景色：#f00；
宽度：100%；
高度：3雷姆；
}
.页脚{
背景色：#0f0；
宽度：100%；
文本对齐：居中；
线高：2rem；
}
.内容{
背景色：#ff0；
弹性：1；
保证金：0.6雷姆0.1.2雷姆；
}
.集装箱{
背景色：#f0f；
保证金：0自动；
最大宽度：120雷姆；
宽度：100%；
填充：02rem；
}
.居中{
显示器：flex；
身高：100%；
对齐项目：居中；
证明内容：中心；
}
.长内容{
背景色：#fff；
}

航行
.长内容
.页脚
我继续寻找解决方案，并很快注意到我对flexbox本身的了解很肤浅，所以我继续使用它

完成所有级别后，我注意到我可以在不使用
位置：绝对
的情况下对齐所有内容，只需在
.wrapper
上使用
对齐内容

下面是我对这个愚蠢问题的解决方案

如果删除
长内容的
高度
，
居中
将继续垂直对齐

谢谢你们这些青蛙，向我大声喊叫


*{框大小：边框框；}
正文{页边距：0；}
.包装纸{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
宽度：100%；
背景色：#ccc；
证明内容：之间的空间；
}
.导航{
背景色：#f00；
宽度：100%；
高度：3雷姆；
}
.页脚{
背景色：#0f0；
宽度：100%；
文本对齐：居中；
线高：2rem；
}
.内容{
背景色：#ff0；
保证金：0.6雷姆0.1.2雷姆；
}
.集装箱{
背景色：#f0f；
保证金：0自动；
最大宽度：120雷姆；
宽度：100%；
填充：02rem；
}
.居中{
显示器：flex；
身高：100%；
对齐项目：居中；
证明内容：中心；
}
.长内容{
背景色：#fff；
高度：1000px；
}

航行
.长内容
.页脚