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

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

Answer 2

https://jsfiddle.net/hemnathmouli/jp7gydwf/

试试这个。

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

Css：

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

这将有效transform: translate(-50%, -50%);

图像不以背景为中心

2 个答案: