Html 使用flexbox将文本居中，然后将按钮与剩余的50%居中

不敢相信我才刚刚开始使用flexbox，看起来很酷，但我被卡住了。我可能只是想得太多了，但我明白flexbox应该让事情变得更简单

我想显示一个整页的英雄形象，标题，标语和联系按钮，很简单吧

我附上了我想要的图片：

基本上，我想将标题和标语文本置于中心位置，以便使用：

justify-content:center;

然后我希望按钮位于剩余50%的中心。我在侧面添加了绿色图像，以帮助显示我想要的位置

我尝试使用：

justify-space-around;

但这似乎推动了标题文本的上升

以下是我当前的代码：

*{
保证金：0；
填充：0；
}
*，*：之后，*：之前{
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
.网站容器{
显示：网格；
网格间距：0rem；
网格模板列：重复（1fr）；
}
.网站容器>*{
显示器：flex；
高度：100vh；
}
h1{
字号：600；
字体大小：4vw；
}
.标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
弯曲方向：立柱；
}
钮扣{
--填料：1.1米；
颜色：黑色；
字体：继承；
背景：无；
填充：1rem计算（1rem*2）；
边框：2件纯黑；
边界半径：2px；
}
按钮：悬停{
颜色：黑色；
背景：红色；
}

标题文本在这里
标语文字在这里
按钮

现有标记最简单的方法就是添加此规则

.calltoaction {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

并将

position:relative

添加到

.website container>*

规则中，以便

calltoaction

的绝对位置与其相关

注意，您需要在整个页面中查看代码段

堆栈片段

*{
保证金：0；
填充：0；
}
*,
*：之后，
*：之前{
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
.网站容器{
显示：网格；
网格间距：0rem；
网格模板列：重复（1fr）；
}
.网站容器>*{
位置：相对位置；
显示器：flex；
高度：100vh；
}
h1{
字号：600；
字体大小：4vw；
}
.标题{
显示器：flex；
证明内容：中心；
对齐项目：居中；
文本对齐：居中；
弯曲方向：立柱；
}
钮扣{
--填料：1.1米；
颜色：黑色；
字体：继承；
背景：无；
填充：1rem计算（1rem*2）；
边框：2件纯黑；
边界半径：2px；
}
.呼叫行动{
位置：绝对位置；
最高：75%；
左：50%；
转换：翻译（-50%，-50%）；
}
按钮：悬停{
颜色：黑色；
背景：红色；
}

标题文本在这里
标语文字在这里
按钮

谢谢你的回答。我曾希望有一种方法可以只用flexbox来实现这一点，但由于你的答案是唯一的，我想没有。在一天结束时，我会把这个问题标记为已回答，因为它是正确的，只是不是我所希望的。谢谢。@Dan将在一秒钟内用第二个样本更新。@Dan用第二个样本更新你的第二个选择在我看来更好。谢谢