以中心为中心覆盖图像的文字

Question

我想以文字中心覆盖图像为中心。这里是我的代码是什么：

<div class="col-md-6"> 
    <div class="safaripreview"> 
     <img src="img/safari1.png" class="img-responsive" alt=""> 
     <h3>Our String Of Pearls</h3> 
    </div> 
</div> 

和我的CSS是目前

.safaripreview 
{ 
    position: relative; 
} 

.safaripreview h3 
{ 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    color: white; 
    padding: 10px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
} 

本步骤是：

当我想要实现这个

有没有更好的方法来实现这个目标？ Flexbox的？

Answer 1

是。 Flexbox的

.safaripreview { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.safaripreview { 
 
    display: inline-block; 
 
} 
 
.safaripreview h3 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white; 
 
}

<div class="safaripreview"> 
 
    <img src="http://www.fillmurray.com/460/300" class="img-responsive" alt=""> 
 
    <h3>Our String Of Pearls</h3> 
 
</div>

Answer 2

position: absolute; 
top: 50%; 
right: 30px; 
left: 30px; 

transform: translateY(-50%); 

将为您达到此目的。

你也可以这样做：

position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 

align-items: center; 
justify-content: center; 

display: flex; 

但是，这不太支持，显然更行:)

Answer 3

改变CSS这样

.safaripreview h3 
{ 
    position: absolute; 
    top: 50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    color: white; 
    padding: 10px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 700; 
}