带中心元素的HTML-CSS覆盖

我想创建一个简单的全屏覆盖与加载器图像和文本在中心。我对课文有一些问题。我希望图像位于文本上方。你能帮我吗

.loader-overlay{
-ms-不透明度：0.9；
背景：#444；
显示：块；
身高：100%；
左：0；
不透明度：0.9；
位置：固定；
排名：0；
垂直对齐：中间对齐；
宽度：100%；
z指数：100000；
}
.加载器内容{
高度：自动；
左边距：自动；
页边顶部：自动；
宽度：自动；
}
.装载机中心{
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-o变换：平移（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
左：50%；
位置：固定；
最高：50%；
转换：翻译（-50%，-50%）；
}
.加载器文本{
颜色：#FFF；
字体大小：18px；
}

正在加载，请稍候。。。

添加：

---

添加

位置：相对

到

.loader text

如果删除当前的.loader内容类并用.loader center中的内容替换它，然后简单地将.loader text的文本居中，您将实现您想要的：

您正在使用的加载程序图像中有一个相当大的透明空间，因此文本最终会比您想要的低一点。要解决此问题，您必须从文本以外的所有内容中删除.loader中心类，然后向其添加以下css属性：

.loader-center {
    position: absolute;
    top: 140px;
    width: 100%;
}

这是一把看起来像什么的小提琴：

---

我们在这里要做的是，首先将保存图像和文本的容器居中，然后将文本相对于其父对象定位为绝对位置，以便将文本移近加载器。

请编辑现有问题，而不是询问新问题。

.loader-content {
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loader-text {
    color: #FFF;
    font-size: 18px;
    text-align: center;
}

.loader-center {
    position: absolute;
    top: 140px;
    width: 100%;
}