Html 当图像处于'；s的父项已溢出：隐藏

我正在尝试将图像放置在其容器中。因为容器有

溢出：隐藏

，它隐藏了图像的一半-我想添加

底部：50%

，所以它显示了图像的中心

此时，如果我这样做，您会看到图像和其父图像之间存在差距。有人知道如何定位这个，这样你就能看到图像的中心了吗

img{
背景颜色：灰色；
显示：块；
位置：绝对位置；
}
.img ctnr med{
宽度：100px；
高度：100px；
边框：1px纯蓝色；
位置：相对位置；
溢出：隐藏；
}

它应该是

底部：-50%

，因此它会将容器高度的50%向下移动到容器的底部边缘，而不是向上远离容器

为指定值时，正值将元素从相应的一侧移走，负值将元素移向相应的一侧。

修改

img {
  background-color:grey;
  display: block;
  position: absolute;
}

到

---

我认为最好的方法是将图像作为背景图像。它更干净，然后在元素周围移动。把这把小提琴看作是一把小提琴

html:

---

图像总是200像素高吗？

img {
  background-color:grey;
  display: block;
  position: absolute;
}

img {
  background-color:grey;
  display: block;
  position: absolute;
  left: -50%;
  top:-50%;
}

<div class="img-ctnr-med">
    <a href="#" style="background-image: url(http://placehold.it/200x200);">link text</a>
</div>

img {

    background-color:grey;
    display: block;
    position: absolute;
    bottom: 30px;
}

.img-ctnr-med a {
    width: 100px;
    height: 100px;
    color: transparent;
    text-indent: -9999px;
    display: block;
    border: 1px solid blue;
    position: relative;
    overflow: hidden;
    background-image: ;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
}