Html 无法使用“对齐自身”将弹性项目居中

我有一个简单的布局要求，我想显示一个标题和一个标志作为正常，并垂直中心的内容在页面上

据我所知，通过使用align self属性的flexbox，这应该很容易实现

这是我的密码：

html， 身体{ 身高：100%； } .基地{ 显示器：flex； 调整内容：灵活启动； 柔性包装：包装； 最小高度：100%； 背景：蓝色； } .标题{ 柔性生长：1； 弹性基准：100%； 高度：30px； 背景：黄色； } .标志{ 柔性生长：1； 弹性基准：100%； 高度：50px； 背景：橙色； } .内容{ 柔性生长：1； 弹性基准：100%；

---

对齐自身：居中；/*align self与弹性项目所在的当前行相对应

因此，如果您希望元素在flex容器中居中，那么在您的案例中必须只有一行，只有一行

该代码段显示了这是如何工作的，即使它不是问题的解决方案：

html，正文{ 身高：100%； } .base{ 显示器：flex； 调整内容：灵活启动； 柔性包装：包装； 最小高度：100%； 背景：蓝色； } .标题{ 柔性生长：1； 弹性基准：30%； 高度：30px； 背景：黄色； } .标志{ 柔性生长：1； 弹性基准：30%； 高度：50px； 背景：橙色； } .内容{ 柔性生长：1； 弹性基准：30%； 对齐自身：居中；/*对齐自身属性与对齐项目密切相关。一个属性用于覆盖另一个。因此

但是，align self和align项目主要用于单行flex容器，即flex wrap:nowrap

当您在多行flex容器中工作时，即flex wrap:wrap–如问题中所述–要使用的属性是

但当“对齐内容”生效时，将同时覆盖“对齐项目”和“对齐自身”

因此，将忽略应用于.content元素的align自治规则，因为flex容器中有多行

该问题的一个可能解决方案是将容器从行切换到列，然后在上使用自动边距。内容：

html，正文{ 身高：100%； } .基地{ 显示器：flex； 弯曲方向：立柱； 最小高度：100%； 背景：蓝色； } 基础>*{ 宽度：100%； } .标题{ 高度：30px； 背景：黄色； } .标志{ 高度：50px； 背景：橙色； } .内容{ 保证金：自动0； 背景：绿色； } 标题 标志 所容纳之物