Html 垂直居中vh高度分区中的内容

我在下面找到了一些解释，但没有一个有帮助

我有一个基于骨架框架的网站。在为我的主页获取全屏图像做了一些研究之后，我想出了以下代码，现在需要将vh高度俯冲的内容水平和垂直居中。有人能帮忙吗？这是我的截图：

以及守则：

.fullwidth标题{
背景图片：url（../images/Risk Home.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面！重要；
高度：85vh；
}
.全宽标题.覆盖{
背景图像：url（../images/overlay.png）；
背景重复：重复；
高度：85vh；
}
.全部头部内容{
填充：50px0；
垂直对齐：中间对齐；
宽度：100%；
显示：内联块；
身高：50%；
位置：绝对位置；
最高：50%；
底部：0%；
保证金：自动；
}

接触专业银行家

风险管理专家
财务经理

不要把它弄得太复杂…；-）下面的设置将起作用。（我添加了背景色以替代背景图像）

.fullwidth标题{
背景图片：url（../images/Risk Home.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面！重要；
高度：85vh；
}
.全宽标题.覆盖{
背景图像：url（../images/overlay.png）；
背景重复：重复；
高度：85vh；
背景：ddd；
}
.集装箱{
位置：相对位置；
身高：100%；
}
.全部头部内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

接触专业银行家

风险管理专家
财务经理

不要把它弄得太复杂…；-）下面的设置将起作用。（我添加了背景色以替代背景图像）

.fullwidth标题{
背景图片：url（../images/Risk Home.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面！重要；
高度：85vh；
}
.全宽标题.覆盖{
背景图像：url（../images/overlay.png）；
背景重复：重复；
高度：85vh；
背景：ddd；
}
.集装箱{
位置：相对位置；
身高：100%；
}
.全部头部内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

接触专业银行家

风险管理专家
财务经理

您可以使用或从规则中选择

• flex

.fullwidth标题{
背景图片：url（../images/Risk Home.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面！重要；
高度：85vh；
}
.全宽标题.覆盖{
背景图像：url（../images/overlay.png）；
背景重复：重复；
高度：85vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.全部头部内容{
填充：50px0；
}

接触专业银行家

风险管理专家
财务经理

您可以使用或从规则中选择

• flex

.fullwidth标题{
背景图片：url（../images/Risk Home.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面！重要；
高度：85vh；
}
.全宽标题.覆盖{
背景图像：url（../images/overlay.png）；
背景重复：重复；
高度：85vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.全部头部内容{
填充：50px0；
}

接触专业银行家

风险管理专家
财务经理

A

text align:center

将使文本显示在中间，因为您将文本宽度设置为100%。也就是说，如果希望文本与中心对齐，而不是与左侧对齐

.fullwidth标题{
背景图片：url（../images/Risk Home.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面！重要；
高度：85vh；
}
.全宽标题.覆盖{
背景图像：url（../images/overlay.png）；
背景重复：重复；
高度：85vh；
}
.全部头部内容{
填充：50px0；
垂直对齐：中间对齐；
显示：内联块；
身高：50%；
宽度：100%；
文本对齐：居中；
位置：绝对位置；
最高：50%；
底部：0%；
保证金：自动；
}

接触专业银行家

风险管理专家
财务经理

A

text align:center

将使文本显示在中间，因为您将文本宽度设置为100%。也就是说，如果希望文本与中心对齐，而不是与左侧对齐

.fullwidth标题{
背景图片：url（../images/Risk Home.jpg）；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面！重要；
高度：85vh；
}
.全宽标题.覆盖{
背景图像：url（../images/overlay.png）；
背景重复：重复；
高度：85vh；
}
.全部头部内容{
填充：50px0；
垂直对齐：中间对齐；
显示：内联块；
身高：50%；
宽度：100%；
文本对齐：居中；
位置：绝对位置；
最高：50%；
底部：0%；
保证金：自动；
}

接触专业银行家

风险管理专家
财务经理