當鼠標懸停在圖像上時，我無法讓按鈕居中在圖像上方

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，這將是更容易實現（甚至引導的響應式設計），並將於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與工作演示