сделать элемент по центру изображения при изменении размера с помощью CSS

Question

Я должен заставить div следовать за изображением и сидеть в его центре вертикально и горизонтально, когда реагирует.Я просто понятия не имею или не думаю, возможно ли это только через css.Любая помощь приветствуется

Answer 1

Хорошо, вы можете использовать старый трюк для центрирования элемента, используя свойство 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;
}

Answer 2

.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, сделайте изображение абсолютным фоном и поместите текст перед изображением.