html - 居中覆盖顶部 div 底部的中间 div 内容和垂直堆叠的底部 div 顶部

Question

假设我有 3 个 div 元素，包裹在一个 article 元素中。它看起来像这样:

<article>
    <div class="thumbnail-img">
        <img src="the_source.jpg">
    </div>
    <div class="avatar">
        <img src="the_avatar.jpg">
    </div>
    <div class="content">
        <p>This is some content!</p>
    </div>
</article>

现在，我想要做的是让中间类“化身”在“缩略图”和“内容”div 之间(重叠)垂直和水平居中。

它看起来像这样: Avatar centered between two div's

如您所见，我正在使用 WordPress。具体来说，就是为 Divi 主题创建自定义模块。

我目前使用的 CSS(效果很好，但不是 100% 响应 - 例如，头像并不总是在其他 2 个 div 之间居中重叠)是这样的:

.avatar {
    margin-left: auto;
    margin-right: auto;
    max-width: 25%;
    min-width: 70px;
    position: relative;
}
.avatar img {
    border-radius: 50%;
    background-color: rgba(255,255,255,.2);
    padding: 5px;
    margin-top: -60%;
    z-index: 10;
}

如果有帮助，这是一个 fiddle :poor attempt

如果需要，很乐意提供更多信息。我只是确定如何为搜索引擎或 SO 中的“单词”。谢谢! :)

Answer 1

你可以试试这个:

Here是输出

.avatar {
    margin-left: auto;
    margin-right: auto;
    max-width: 25%;
    min-width: 70px;
    position: relative;
    display:block;
    text-align:center;
}
.avatar img {
    border-radius: 50%;
    background-color: rgba(255,255,255,.2);
    margin-top:-50px;
    z-index: 10;
    display:inline-block;
}
.thumbnail-img img{
    width:100%;
}

<article class="article_wrap">
   <div class="thumbnail-img">
      <img src="http://pti.mizagorn.com/wp-content/uploads/2017/07/2-1080x675.png">
   </div>
   <div class="avatar">
      <img src="http://2.gravatar.com/avatar/586dffc3308324e0c294a0abff58eb86?s=96&d=mm&r=g">
   </div>
   <div class="content">
      <p>This is some content!</p>
   </div>
</article>