HTML 图像叠加定位

Question

我正在为 17 号到期的学校做一个小组元素。我试图让一个图像完美地居中于另一个图像。我想我基本上在几天前就弄明白了，但现在我在我的家用电脑上处理它，对齐全都搞砸了。我需要帮助让图像水平居中在屏幕中间，并让顶部图像居中在背面图像的中间。这是屏幕截图、代码和指向特定代码的链接。

提前致谢!

HTML 图片代码:

<div class="flagpart">
  <article id="flag2">
  <div id="backimg"></div>
  <img src="flag.png" class="flag">
  </article>
</div>

CSS 图片代码:

#backimg {
background-image: url(flag.png);
background-repeat: no-repeat;
background-size: contain;
height: 750px;
background-clip: padding-box;
margin:0 auto;
text-align: center;
  filter: blur(5px);
z-index: 1;
}

.flag {
  width: 50%;
  height: 50%;
  display:inline-block;
  text-align: center;
  margin: -42.5% 0% 0% -25%;
  z-index: 2;
  position: absolute;
}
#flag2 {


}
.flagpart {

text-align: center;

}

backimg 是模糊背景图片，flagpart 包含两张图片，flag2 是另一个容器，flag 是最上面的图片。

网站链接: https://cooking-light-3.spencerleagra.repl.co/recipe2.html

代码链接: Link Here

此外，如果有人对如何使网站看起来更好有任何总体建议，请随时提出。

Answer 1

使用相对和绝对定位将背景图像和 img 放在彼此的顶部，而不是使容器成为 flexbox 以使 img 标签居中:

.container {
  height: 500px;
  width: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.container > #backimg {
  background-image: url(http://placekitten.com/700/500);
  background-position: center center;
  background-size: cover;
  filter: blur(3px);
  width: 100%;
  height: 100%;
}

.container > img {
  width: 50%;
}

.container > #backimg,
.container > img{
   position:absolute;
}

<div class="container">
  <div id="backimg"></div>
  <img src="http://placekitten.com/700/500" />
</div>