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类，而不是在图像本身中应用，但得到了相同的结果。

Answer 1

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

我总是在父母的垂直和水平中心元素中使用defacto CSS代码。

如果您将之前的定位代码移除到.sooperIdea类并添加上述代码，则可以正常工作。

.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添加到父元素，以确保绝对定位的子项相对于父元素

将图像粘贴到div的中心

1 个答案: