css 图片叠加 居中 |animate.css 使用步骤

下面介绍一种使用CSS实现图片叠加并且居中的方法：

HTML代码：
<div class="container">
<img src="image1.png" class="bottom-img">
<img src="image2.png" class="top-img">
</div>
CSS代码：
.container {
position: relative;
}
.bottom-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}

以上代码中，大家使用了一个包含两张图片的div容器，并将这个容器设置为position: relative，使得内部绝对定位元素相对于该容器进行定位。

底部图片使用 position: absolute 设置其相对位置，同时使用了 top, left 和 transform 属性将其居中于父容器。

顶部图片也使用 position: absolute 进行定位，z-index 属性设置图层顺序，使其浮层于底部图片上方。同样使用 top, left 和 transform 属性将其居中于父容器。

以上就是css图片叠加居中的方法。希望对大家有所帮助。