CSS：居中对齐并让 Div 隐藏溢出的图像

Question

我能够使用 CSS 将我的 div 和图像设置为居中（水平居中，垂直居中）对齐：

.center {
  height: 100%
}

.center-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: auto;
  overflow:hidden;
}

.overlay {
  position: relative;
  max-width: 100%;
  z-index: 9999999
}

.image{
  position: absolute
}

<div class="center">
  <div class =" center-center ">
    <img class="image" src="http://kb4images.com/images/picture/37509081-picture.jpg" />
    <img class ="overlay " src="http://makephotogreetings.com/upload/1456330147Happy%20Birthday%20Frame%20With%20Cup%20Cake%20and%20Your%20Photo.png"></img>
  </div>
</div>

现在，我的问题是，即使我在“center-center”类中设置了溢出：隐藏，它也会隐藏一些部分，但一侧仍然显示。我试图为框架图像分配一个高度，但它会影响定位。有谁知道这是否可能？

我已经更新了 sn-p 和代码以便更好地理解

Answer 1

这里有很多 HTML/css 错误，比如 className 来自 javascript，css 使用 class。我添加了图像占位符，我只是摆脱了大多数样式，而是使用 flexbox 进行定位。

然后覆盖应该有绝对位置，这里它正好在第一张图像之上。

您可以更改叠加位置以进行证明，但是对于您的叠加图像，它的中间会有一个孔来显示

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999999;
}

<div class="center">
  <img src="http://via.placeholder.com/350x150">
  <img class="overlay" src="http://via.placeholder.com/350x150/fff666/000000">
</div>

Answer 2

感谢您提供 sn-p，让事情变得更容易。

因此，根据您对我之前的回答的 cmets，我只是以更简单的方式重新创建了这个。这是假设您可以访问 CSS 并且卡片的固定宽度为 500x500。

基本上我只是制作了一个包含“叠加”图像的图像容器，然后将此容器的背景设置为另一个图像。

.birthday-card {
  display: block;
  width: 500px;
  height: 500px;
  position: relative;
  background-image: url('http://kb4images.com/images/picture/37509081-picture.jpg');
  background-size: cover;
  background-position: center;
}

.birthday-card img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="birthday-card">
  <img src="http://makephotogreetings.com/upload/1456330147Happy%20Birthday%20Frame%20With%20Cup%20Cake%20and%20Your%20Photo.png">
</div>