Css 如何在div顶部覆盖透明颜色并定位加载。。。文本位于div的绝对中心？ 方格{ 高度：200px； 宽度：200px； 保证金：0px自动； } 装载{ ... }

我正在尝试：

在div顶部覆盖黑色，透明度为50%（因此背景仍然可见）

将

加载…

文本放置在div的绝对中心

---

我如何使用纯CSS实现这一点？

希望这将对您有所帮助

.square{
高度：200px；
宽度：200px；
保证金：0px自动；
背景：rgba（0,0,0,5）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

加载。。。

display flex是您的朋友

.square{
高度：200px；
宽度：200px；
保证金：0px自动；
背景颜色：黄色；
位置：相对位置；
}
.装货：在{
内容：“……加载”；
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
背景：rgba（0,0,0,5）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

使用此代码

.square{
高度：200px；
宽度：200px；
保证金：0px自动；
背景：rgba（0,0,0,0.5）；
位置：相对位置；
}
.square：：之后{
颜色：#fff；
内容：“加载…”；
左：0；
保证金：自动；
位置：绝对位置；
右：0；
文本对齐：居中；
最高：50%；
转化：translateY（-50%）；
}

.container{
显示器：flex；
高度：200px；
宽度：200px；
位置：相对位置；
边框：1px实心：#ddd；
填充：10px；
}
.加载器{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgba（127，127，127，0.6）；
不透明度：0；
过渡：所有0.3秒缓解；
z指数：-1；
}
.loader.active{
不透明度：1；
z指数：1；
}

加载
海

这里有一个带内容的

div

，还有一个带类覆盖的

div

。你可以这样试试

.overlay{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
保证金：0px自动；
背景：rgba（0,0,0,7）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子。多奈克·马克西姆斯·马萨·乌拉姆科珀是一位著名的艺术家

加载。。。

太好了，辛格。非常感谢！谢谢，但我正在寻找纯CSS。

<div class="square loading"></div>

square {
  height: 200px;
  width: 200px;
  margin: 0px auto;
}

loading {
  ...
}