使用CSS调整大小时使元素居中于图像

Question

响应时，我必须使div跟随图像并垂直和水平地坐在其中心。我只是不知道还是不认为只有CSS才有可能。感谢您的帮助

Answer 1

.imageWrapper {
  height:200px;
  width:200px;
  position:relative;
  margin:50px auto 0px auto;
}

.imageWrapper > div:first-child {
  position:absolute;
  z-index:1;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  overflow:hidden;
}

.imageWrapper > div:first-child img{
  height:200px;
  width:100%;
  object-fit:cover;
  position:relative
}

.imageWrapper > div:last-child {
  position:relative;
   

   z-index:2;
text-align:center;
line-height:200px;
height:200px; 
width:100%;
    }

<div class="imageWrapper">
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Billede_084.jpg"></div>
  <div><p>bla bla</p></div>
</div>

制作一个环绕式div，将图片绝对作为背景，并将文本放在图片前面。

Answer 2

好吧，您可以利用 position 属性充分利用旧的技巧使元素居中。

像往常一样，示例胜于解释。

.html

<div class="parent">
  <div class="child"></div>
</div>

.css

.parent {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: lightblue;
}

.parent .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background-color: grey;
}