将标题置于没有Flexbox的响应式映像之上

Question

我想在图像顶部放置一个标题，垂直和水平居中对齐。我通过Flexbox实现了它。但是，某些浏览器不支持Flexbox。没有flexbox，有没有办法做到这一点？

注意：图像必须是响应式的。所以我不能将背景图像用于div

<div class="col-md-3 col-6 category" @click="openPopup('cement')">
  <img src="https://www.quotzap.com/static/images/categories/cement.jpg" width="100%" />
  <h2>Cement</h2>
</div>

.category{
  cursor: pointer;
  transition: all .2s ease;
  justify-content: center;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.category h2{
  max-width: 100px;
  text-align: center;
  position: absolute;
  color: #ffffff;
  line-height: 1.5;
}
.category img{
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px rgba(143,143,143,0.68);
  position: relative;
  -webkit-filter: brightness(70%);
  transition: all .2s ease;
}

Answer 1

尝试将CS​​S更改为此...如果您不想使用弹性框。

.category{
  cursor: pointer;
  transition: all .2s ease;
  justify-content: center;
  position: relative;
  align-items: center;
  z-index: 0;
}
.category h2{
  max-width: 100px;
  text-align: center;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:50%;
  position: absolute;
  color: #ffffff;
  line-height: 1.5;
  z-index:2;
}
.category img{
  z-index: 1;
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px rgba(143,143,143,0.68);
  position: relative;
  -webkit-filter: brightness(70%);
  transition: all .2s ease;
}