将图像粘贴到 div 的中心

Question

我关注了Difference between style = "position:absolute" and style = "position:relative"，我了解到如果外层的div是相对位置，那么当你将内层的div设置为绝对位置时，它会根据到外面 div.

这是我的代码：

HTML:

<div class="sonar-wrapper">
  <div class="sonar-emitter">
    <div class="sonar-wave"></div>
  </div>
  <img src="https://sdl-stickershop.line.naver.jp/products/0/0/1/1034784/android/stickers/1469060.png" height="72 " width="72 " class="sooperIdea ">
</div>

CSS:

.sooperIdea {
  position: absolute;
  left: 44.5%;
  top: 29%;
}


/* Prevent scrollbars to appear when waves go out of bound */

.sonar-wrapper {
  position: relative;
  z-index: 0;
  //overflow: hidden;
}


/* The circle */

.sonar-emitter {
  position: relative;
  margin: 32px auto;
  width: 160px;
  height: 160px;
  border-radius: 9999px;
  background-color: HSL(45, 100%, 50%);
}

但是，当我最小化浏览器的宽度（尝试模拟移动设备）时，图像无法固定在 div 的中心。如果我把它放在手机的中心周围，那么在 PC 的全屏模式下它就会错位（不居中）。

在 Live demo.

中使用它

如何在PC和移动设备上获取太阳中心的图像？

PS：我还尝试将图像放在 div 中，并在那里应用 sooperIdea class，而不是在图像本身中这样做，但得到了相同的结果。

Answer 1

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );

是事实上的 CSS 代码，我总是在垂直和水平中心元素中使用 parent.

如果您将之前的定位代码删除到 .sooperIdea class 并添加上面的代码，它就可以正常工作。

.sooperIdea {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );
}


/* Prevent scrollbars to appear when waves go out of bound */

.sonar-wrapper {
  position: relative;
  z-index: 0;
  //overflow: hidden;
}


/* The circle */

.sonar-emitter {
  position: relative;
  margin: 32px auto;
  width: 160px;
  height: 160px;
  border-radius: 9999px;
  background-color: HSL(45, 100%, 50%);
}

<div class="sonar-wrapper">
  <div class="sonar-emitter">
    <div class="sonar-wave"></div>
  </div>
  <img 
    src="https://sdl-stickershop.line.naver.jp/products/0/0/1/1034784/android/stickers/1469060.png" 
    height="72 " width="72 " class="sooperIdea"
  >
</div>

请注意，我们将 position: relative 添加到 parent 元素以确保绝对定位的 child 相对于 parent[= 定位32=]

将图像粘贴到 div 的中心

Stick image to center of div

html

css

mobile

image

center