CSS：在div頂部作為背景的中心圖像

Question

我不知道為什么這張圖片不會居中。 我需要將其居中在確切的中心，並且如果調整屏幕大小（我使用的是引導程序4），這應該可以工作。

HTML：

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

        <img src="">
</div>

CSS：

    .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

Answer 1

假設您希望將其垂直和水平居中，請嘗試一下-https: //jsfiddle.net/4c6n9bjq/1/

進行了一些代碼更改，並使用庫存圖片作為示例

HTML

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


   </div>
</div>

CSS

 .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;
 }

關鍵是要根據圖像尺寸為圖像div分配必要的vh和vw值。 正確設置后，圖像將在整個屏幕尺寸上適當縮放。

Answer 2

我退出了.general-container類，因為您似乎不需要它。 另外，您不應具有與ID相同名稱的類。 請嘗試以下代碼：

 .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; transition: 1s; z-index: 9999; opacity: .8; } #general-container { background: #000 url("https://arviem.com/wordpress/wp-content/uploads/2018/07/logo.ico") center no-repeat; } 

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