html - 悬停时我无法让按钮以图像为中心

Question

当鼠标悬停在图像上时，会出现一个按钮；按钮向左，我需要让它居中。我正在使用 HTML5、CSS3 和 bootsrap v3.3.4。除了按钮不居中外，一切正常。我错过了什么？在此先感谢您的帮助:)

<div class="row">
<div class="col-sm-3">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h4>
<a href="#">
                                    Test       
</a>
</h4>
<p>
                                test
</p>
</figcaption>
<div class="img-wrapper">
<img src="image1.jpg" class="img-responsive" alt="title" >
<div class="overlay">
<div class="buttons">       
<a target="_blank" href="">Discover</a>
</div>
</div>
</div>
<figcaption>
<h4>
<a href="#">
                                    test       
</a>
</h4>
<p>
                                test
</p>
</figcaption>
</figure>
</div>

CSS

figure {
background: #fff;
margin-bottom: 45px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.04), 0 2px 10px 0 rgba(0, 0, 0, 0.06);
}

figure .img-wrapper {
position: relative;
overflow: hidden;
}

figure img {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: -webkit-transform 400ms;
transition: transform 400ms;
}

figure:hover img {
-webkit-transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1.2, 1.2, 1);
}

figure:hover .overlay {
opacity: 1;
}

figure:hover .overlay .buttons a {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

figure .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
text-align: center;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity 400ms;
transition: opacity 400ms;
}

figure .overlay a {
display: inline-block;
color: #fff;
padding: 10px 23px;
line-height: 1;
border: 1px solid #fff;
border-radius: 0px;
margin: 4px;
-webkit-transform: scale3d(0, 0, 0);
transform: scale3d(0, 0, 0);
-webkit-transition: all 400ms;
transition: all 400ms;
}

figure .overlay a:hover {
text-decoration: none;
}

figure .overlay:hover a {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}

figure .buttons {
position: absolute;
top: 45%;
left: 24%;
}

figure figcaption {
padding: 20px 25px;
margin-top: 0;
color: #666;
}

figure figcaption h4 {
margin: 0;
}

figure figcaption h4 a {
color: #02bdd5;
}

figure figcaption p {
font-size: 16px;
margin-bottom: 0;
margin-top: 5px;
}

Answer 1

如果你将使用flexbox，这将更容易实现(即使使用 Bootstrap 的响应式设计)，并且将得到all modern browsers 的支持。

为此，请按如下方式更改您的 css:

figure .buttons {
  /* remove all styles */
}

figure .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;

  /* Added styles: */
  display: flex;
  justify-content: center;
  align-items: center;
}

(如果您向 .buttons 元素添加更多按钮，这也会起作用)

这是一个 Codepen有一个工作演示