Html Css定位按钮位于覆盖的中心，图像位于背景中

.msg ex{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
}
.msg ex.msg ex叠加{
位置：相对位置；
背景色：rgba（0,0,0,0.4）；
宽度：100%；
身高：100%；
不透明度：0；
z指数：2；
}
.msg ex.msg ex overlay.msg ex cta{
位置：绝对位置；
颜色：红色；
背景色：#DCE0E3；
字体大小：1.1米；
字号：700；
边界半径：18px；
高度：38px；
宽度：100px；
光标：指针；
最高：50%；
左：50%；
转化：translateX（-48%）translateY（-47%）；
}
.msg ex.msg ex覆盖：悬停{
不透明度：1；
}
.味精盒{
位置：相对位置；
背景色：$voiceColor；
}
.msg ex box：：之后{
内容：''；
底部：0；
右：0；
宽度：32px；
高度：32px；
背景图像：url（../pics/data/img1.png）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
位置：绝对位置；
z指数：1；
}
}
.msg ex语音：悬停{
背景色：rgba（0,0,0,0.4）；
}

显示

如果要将任何内容居中，请将其放在父项中：

display: flex;
justify-content: center;

并将其添加到您试图居中的子对象：

align-self: center;

---

希望这有帮助

这是因为

.msg ex cta

的父元素没有高度。使用

高度时：100%

对于

.msg ex overlay

百分比高度需要从中继承的值，没有为其父级定义高度，因此

0

的

100%

为

0

增加

宽度时：100vw和<代码>高度：100vh

到

.msg ex overlay

可能会得到您想要的，有可能需要更改模式/覆盖的触发方式。虽然我不知道你的确切目标，所以我会保持原样，直到另行通知

正文{
保证金：0；
}
.msg-ex{
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
}
.msg ex.msg ex叠加{
位置：相对位置；
背景色：rgba（0,0,0,0.4）；
宽度：100vw；
高度：100vh；
不透明度：0；
z指数：2；
}
.msg ex.msg ex overlay.msg ex cta{
位置：绝对位置；
颜色：红色；
背景色：#DCE0E3；
字体大小：1.1米；
字号：700；
边界半径：18px；
高度：38px；
宽度：100px；
光标：指针；
最高：50%；
左：50%；
转化：translateX（-48%）translateY（-47%）；
}
.msg ex.msg ex覆盖：悬停{
不透明度：1；
}
.味精盒{
位置：相对位置；
背景色：$voiceColor；
}
.msg ex box：：之后{
内容：''；
底部：0；
右：0；
宽度：32px；
高度：32px；
背景图像：url（../pics/data/img1.png）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
位置：绝对位置；
z指数：1；
}
}
.msg ex语音：悬停{
背景色：rgba（0,0,0,0.4）；
}

显示

使用以下css作为您想要居中显示的按钮

position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);

或

---

你真的测试过这个吗？这与OP的解决方案有何不同<代码>对齐项目：居中与

align self:center的区别相同。只有一个元素
对齐项目：居中可以从父项应用到，因此您不必担心某些不应该的项目。
display:flex;
align-items:center;
justify-content:center;