Html CSS：将图像居中放置在作为背景的div顶部

我不知道为什么这张照片不能居中。我需要它在准确的中心居中，这应该工作，如果屏幕的大小（我使用引导4）

html:

<div id="general-container" class="general-container preloader">

        <img src="">
</div>

    .preloader {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transition: 1s;
    z-index: 9999;
    opacity: .8;
}

#general-container {
    background-image: url("/static/img/logo.png");
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;

}

项目结构：

-llama-stickers
 |_cart
   |_templates
     |_cart.html
 |_llama-stickers
 |_order
 |_search_app
 |_shop
   |_templates
     |_base.html
 |_static
   |_css
     |_preloader.css
   |_img
     |_logo.png

---

假设您希望垂直和水平居中，尝试一下-

为了举例，做了一些代码更改并使用了一个股票图像

HTML

<div id="general-container" class="preloader">
   <div class="photo-bg">


   </div>
</div>

---

关键是，根据图像尺寸为图像div分配必要的vh和vw值。一旦你得到了正确的结果，图像将在屏幕大小之间进行适当的缩放。

我取出了

.general container

类，因为看起来你不需要它。此外，您不应该有与ID同名的类。请尝试以下代码：

.preload{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：#000；
过渡：1s；
z指数：9999；
不透明度：.8；
}
#通用集装箱{
背景：#000 url（“https://arviem.com/wordpress/wp-content/uploads/2018/07/logo.ico）中心不重复；
}

---

常规容器应为全宽和全高，并使用背景位置中心。首先，您不应拥有使用相同名称的ID和类。尤其是在同一元素上。这是不恰当的，而且会带来麻烦。选择答案是最干净、最简单的代码：(

 .preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: #000;
   transition: 1s;
   opacity: .8;
 }

 .photo-bg {
   background-image: url("http://people.cs.ksu.edu/~xou/argus/img/profile/placeholder.png");
   background-repeat: no-repeat;
   display: block;
   width: 250px;
   height: 250px;
   top: 40vh;
   left: 40vw;
   position: absolute;
 }