html - 图像未与背景居中

Question

我在下面的代码中将图像居中，但当我将它居中时，背景逐渐变淡。我设法将图像放在中心，但背景颜色。如何解决这个问题？请告诉我如何定位图像？

HTML

<section id="contact">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-5 centered">
<img src="something.jpg" alt="">
</div>
</div>
</div>
</section>

CSS

#contact
{
    background-color:black;
    }

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

#contact  .centered
{
    float:none;
    margin:0 auto;
    }

#contact img
{
    border-radius:50%;
    border: 4px solid #fff;
}

Answer 1

如果你给外部位置 absolute 和容器位置 relative ，它可以帮助你，对于左边，前 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); */
    }