如何在div居中的同时将div中的内容保留在适当的位置

Question

我正在尝试将div居中放置，同时将其内容保持在适当位置。

这是我的代码：

Angular

这是我得到的结果

这就是我想要实现的目标。

Answer 1

如何使用CSS将图片居中： https://www.w3schools.com/howto/howto_css_image_center.asp

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Answer 2

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

.character {
  position: absolute;
  bottom: -10%;
  left: 0;
  height: 100px;
}

<div class="wrap">
  <img class="background" src="https://p4.wallpaperbetter.com/wallpaper/348/300/844/digital-digital-art-artwork-planet-fantasy-art-hd-wallpaper-preview.jpg">
  <img class="character" src="https://lh3.googleusercontent.com/KWjPQjV1ZZXvMBFNjab-HK3ZHTO5zSpkPTFf3x-d87RNBMnZ3A2hCbTZNumHxfydGQ">
</div>

Answer 3

这也是使div居中对齐的解决方案，还有其他方法，但与响应性一起使用时效果不佳。因此，这里是我添加一个额外容器来包含 wrap 类，然后对齐中心的解决方案。

您可以下次尝试

边距：自动50px； 这也可以使元素在体内居中，但在这里不起作用。

.container{
     display: flex;
     align-items: center;
     justify-content: center;
}
                  
.wrap{
    display: inline-block;
    position: relative;
}
.character{
     position: absolute;
     bottom: -10%;
     left: 0;
     height: 100px;
}

<div class="container">
        <div class="wrap">
          <img class="background" src="https://p4.wallpaperbetter.com/wallpaper/348/300/844/digital-digital-art-artwork-planet-fantasy-art-hd-wallpaper-preview.jpg">
          <img class="character" src="https://lh3.googleusercontent.com/KWjPQjV1ZZXvMBFNjab-HK3ZHTO5zSpkPTFf3x-d87RNBMnZ3A2hCbTZNumHxfydGQ">
        </div>
      </div>