Html 将元素与上方1/3的空间垂直对齐，下方2/3的空间垂直对齐

我有一个“英雄图像”填充视口的高度和宽度。在这个

div

中有一个标题。我希望标题垂直对齐，以便任何可用空间都位于上方三分之一和下方三分之二

例如： 英雄形象=1000像素高。H1=400像素高。所以上面的空间=200px 下方空间=400px

这是一个反应灵敏的布局，所以我不知道英雄形象或标题的高度

垂直居中使用Flexbox是很容易的，但我需要更多的空间下面。 有人能给我指路吗

这是到目前为止我的代码。请注意，我以前没有使用过Flex，所以我真的不知道我在做什么

.hero_image {
    min-height:100vh;
    background-color:yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.hero_image h1 {
    font-size:72px;
    padding-top:20px;
    }

<div class="hero_image">
    <h1>Heading <br>more text <br>last bit of text</h1>
</div>  

.hero\u图像{
最小高度：100vh；
背景颜色：黄色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.hero_图像h1{
字体大小：72px；
填充顶部：20px；
}
标题
更多文本
文本的最后一位

这里有一个指向JSFIDLE示例的链接

您可以使用

calc（33%-）

，但您需要知道

的标题提示

您可以尝试以下方法：


#容器1{
/*高度：100px*/
边框：2件纯蓝；
}
#头部容器{
利润率最高：33%；
利润底部：66%；
高度：40px；
边框：1px纯红；
}
calc（）函数
文本
标题
文本2
要处理布局部分，我将使用CSS网格：

CSS Grid Layout擅长将页面划分为主要区域，或定义由HTML原语构建的控件各部分之间的大小、位置和层关系

与表格一样，网格布局允许作者将元素对齐到列和行中。然而，与表相比，CSS网格可以实现更多的布局，或者更容易实现更多的布局。例如，网格容器的子元素可以定位它们自己，以便它们实际上重叠和分层，类似于CSS定位的元素




.hero\u图像{
最小高度：100vh；
背景颜色：黄色；
显示：网格；
网格模板行：1fr auto 2fr；/*有趣的是*/
}
.hero\u image>.content{
宽度：100%；
显示器：flex；
证明内容：中心；
}
.hero_图像h1{
字体大小：72px；
填充顶部：20px；
}
/*只是为了显示利润*/
.hero_image>div:第一个孩子，
.hero_image>div:最后一个孩子{
背景：红色；
}
身体{
保证金：0；
}

标题
更多文本
文本的最后一位
使用psuedo元素将您的
hero\u图像制作成一列
flexbox
：


在
之前将
flex:1
赋予
，并且

flex:2
到
之后
以获得效果

请参见下面的演示：


.hero\u图像{
最小高度：100vh；
背景颜色：黄色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
弹性方向：列；/*已添加*/
}
.hero_图像h1{
字体大小：72px；
填充顶部：20px；
背景：#fff；/*用于说明*/
}
身体{
保证金：0；
}
.hero_图像：在{/*之后添加*/
弹性：2；
内容：''；
}
.hero_图像：在{/*之前添加*/
弹性：1；
内容：''；
}

标题
更多文本
文本的最后一位
你好。你能分享你的代码吗？（）我们无法在不检查代码的情况下hwlp您..请添加工作代码段或JSFIDLE链接。谢谢，我想你想要的布局图会很有帮助。（使用任何油漆制作）@user2991837提供一个示例代码，它将有助于解决问题或使用flexbox align content:space-between；