html - 在没有 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

尝试将您的 CSS 改成这样...如果您不想使用 flexbox 。

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