Html 在绝对位置使用flex将项目对准中心

我有一个旋转木马，我需要在旋转木马的中心显示文本（水平和垂直中心）。所以我使用了flex display属性，但没有得到预期的结果

.heroText{
显示器：flex；
位置：绝对位置；
对齐项目：居中；//将元素垂直居中对齐
对齐内容：居中；//将元素水平居中对齐
z-index:999！重要；//显示旋转木马上方的文本
}

农民

对齐项目

和

对齐内容

不是对齐元素，而是对齐元素的“子元素”

如果要将绝对定位的元素置于其相对父元素的中心，请尝试将其添加到

.heroText

：

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

---

或者，使

.heroText

的父对象显示flex，并将对齐和对齐线移动到该父对象的类。

使用flex，您只需将方向设置为column并对齐中心的列即可。不需要奇怪的翻译，尤其是因为你已经想使用flex了

.heroText{
宽度：50%；
高度：10公分；
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
文本对齐：居中；
}

农民

CSS

align content

将内容而不是子元素居中，但不管

绝对定位如何

都会从文档流中删除元素。你不能两者都用

用这个来代替定心

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

注意：

---

如果使用

position:absolute

的唯一原因是启用

z-index

。您可以尝试使用

position:relative

，这将允许

flex-box

按预期继续工作。

不确定这是针对问题的，还是您的实际CSS，但请注意

/

不是正确的注释语法。