flexbox图像库上的响应式文本覆盖[重复]

Question

所以我有这个代码来显示图片库。我想在每个图像的中间放置“box-text”类。但是如果我想使用 position: relative 它不起作用。无论我如何在 css 中设置 top 属性，文本都不想高于图像的底部。

<div class="container">  
  <div class="box">
       <img src="1.jpg" class="img-responsive">
       <div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
   </div>

     <div class="box">
       <img src="2.jpg" class="img-responsive">
       <div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
     </div>

    <div class="box">
       <img src="3.jpg" class="img-responsive">
       <div class="box-text"><h2>Some text</h2><h3>other text</h3></div>
     </div>
</div>

我的 CSS 样式：

.container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
   }

.box img{
    z-index: 1;
  }


.box-text{
  position: relative;
  top:50%;
  left: 50%;
  z-index: 2;
}

Answer 1

使用 position: absolute 代替？您还可以使用 transform: translate 来帮助居中：

.box {
  position: relative;
}
.box-text{
  position: absolute;
  top:50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50% -50%);
}