Html 图像未与背景居中

在下面的代码中，我将图像居中，但当我居中时，背景会消失。我已设法将图像置于中心，但背景颜色不变。如何解决这个问题？请告诉我如何定位图像好吗

HTML

---

如果您给出外部绝对位置和容器相对位置，它可以帮助您，对于左上50%的值，将它们放在外部div中，因为您将它们一个放在另一个中

#contact{
        background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    }

.container 
{
        text-align: center;
    position: relative;
    margin: 0;
    padding: 0;
    top: 50%;
    /* left: 50%; */
    /* transform: translate3d(-50%, -50%,0); */
    }

试试这个

<div class = "image">
<img src = "http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" alt="myimage"> 
<span class = "caption">
Hello World.!
</span>
</div>

---

这将工作转换：翻译-50%，-50%

你的任何容器上都没有高度，因此你看不到背景。请为@user3755882部分指定一些高度和宽度。我在尝试时使用的图像没有背景，这就是我看到它的原因

#contact{
        background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    }

.container 
{
        text-align: center;
    position: relative;
    margin: 0;
    padding: 0;
    top: 50%;
    /* left: 50%; */
    /* transform: translate3d(-50%, -50%,0); */
    }

<div class = "image">
<img src = "http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" alt="myimage"> 
<span class = "caption">
Hello World.!
</span>
</div>

.image{
position: relative;
text-align: center;
display: table;
}

.caption{
    position: absolute;
background: black;
padding: 10px;
color: white;
    width: 100px;
    left: 50%;
    top: 50%;
  transform: translate(-50%, -50%);
}