Html 将按钮置于流体图像的中心

最近几天，我试图将一个按钮置于流体图像的中心。到目前为止，这个位置是固定不变的。相关的HTML部分如下所示：

<ul class="moodlegrid sectionwrap">
  <li>
    <a class="ajax1" href="project1.html">
      <img title="Project 1" src="img/projectblur.jpg" alt="Project 1" />
      <img title="Project 1" src="img/project.jpg" alt="Project 1" />
      <span class="openoverlay">Click</span>
    </a>
  </li>
</ul>

鼠标悬停在第二个图像上时，按钮应居中浮动在第一个图像的顶部。问题是，如果视口发生更改，则最新版本不再工作，且按钮未居中。以下关于CSS技巧的文章有一个很有希望的解决方案：

演示效果很好：

但是它使用了内联块元素，这使得很难对图像进行分层，并在图像顶部显示一个最终居中的按钮-设置“显示：内联块”属性时，元素会依次显示。还有一个问题是，与我的HTML不同，演示将子对象与父对象对齐

---

有没有一种方法可以将上述技术应用到我的问题上，或者有没有更好的适合方法？向拉尔夫致以最诚挚的问候

如果我理解正确，我想你就快到了

这就解决了你想做的事情吗？
嗨，这就是你想做的吗

html

工作

注意：滚动小提琴以查看效果
您可能需要调整宽度和高度，使其更适合
单击
文本。下面是一个示例，它使用
50px
表示宽度，使用
20px
表示该文本。它还解析较少的。如果您愿意，可以随意利用其中的任何一个作为您的答案。谢谢你，真管用！我刚刚和rem交换了px值，但除了一切正常之外。您的解决方案的优点是它利用了一般属性，而不像垂直对齐那样可能导致交叉浏览器问题。所以我唯一要做的就是在媒体查询中调整按钮大小和边距值。很酷再次感谢您的快速帮助！嗯，如果我在你的小提琴中缩小窗口，并且图像调整大小，按钮就不会保持其中心位置。在您的示例中，跨距位于上边框下方200px，因此对于较小的图像尺寸，按钮向下移动。
.moodlegrid{
    li{
        a{
            position: relative;
            display:block;
            width: 100%;
            img:nth-child(1){
                display:block;
            }
            img:nth-child(2){
                display: none;
            }
            span{
                display:none;
            }
        }
        a:hover{    
            img:nth-child(2){
                display: block;
                position: absolute;
                z-index: 100;
                top:0;
                left:0;
            }
            span{
                display: block;
                position: absolute;
                text-align:center;
                top: 37%;
                left: 28%;
                z-index:101;
                @include border-radius(5px, 5px);
                @include box-shadow(black 2px 2px 10px);
            }
        }
    }
}

img{
    width:100%;
    max-width: 100%;
    height:auto !important;
}

width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px /* Half of the height */
margin-left: -50px; /* Half of the width */

<div>
    <h1><span>button</span></h1>
    <img src="imageSample.jpg" alt="" />    
</div>

div {
    position:relative;
    width:100%;
}
div img {
    max-width:100%;
    width:100%;
}
div h1 {
    width:100px;
    margin:auto;
}
div h1 span {
    position:absolute;
    z-index:999;
    top:200px;
    padding:5px;
    background-color:#fff;
}