Html 放置div底部中间的圆形图像

---

图片描述了一切。我知道如何制作这个圆形图像。但我还是不知道这样放置图像的方法。圆形图像应保持在div的中间，因为div的宽度发生变化。

您必须将父元素设置为相对（位置：相对）将img包裹在div中，绝对位置为50%左右，具体取决于您

<figure>
    <figcaption class="top">assassin's creed</figcaption>
    <div><img src=http://www.pulpfortress.com/wp-content/uploads/2010/11/Ezio-Assassins-Creed.jpg /><div>
</figure>

---

您可以使用“相对位置”将图像从底部div移到两者之间的边界上

CSS

.top {
    background: grey;
    height: 120px;
}
.bottom {
    background: white;
    text-align: center;
    height: 60px;
}
.bottom > img {
    position: relative;
    top: -50%;
}

HTML

<div class="wrap">
    <div class="top">HELLO PROGRAMMERS!</div>
    <div class="bottom"><img src="image.png" /></div>
</div>

程序员们好！

是的，它可以使图像居中。但是我需要将圆形图像放在另一个图像的顶部（如链接图像所示）。这就是我想要的。非常感谢，朋友D

<div class="wrap">
    <div class="top">HELLO PROGRAMMERS!</div>
    <div class="bottom"><img src="image.png" /></div>
</div>