文本覆盖图像与中心

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;
}