[分享]css两张图片重叠居中

CSS中如何实现两张图片重叠并居中呢？借助CSS3的transform属性可以轻松实现此效果，具体实现方法如下：

 <div class="parent">
        <img class="image-1" src="image-1.jpg">
        <img class="image-2" src="image-2.jpg">
    </div>

    <style>
        .parent {
            position: relative;
        }

        .image-1, .image-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .image-1 {
            z-index: 1;
        }
    </style> 

首先，我们需要一个包裹两张图片的容器，并让它的position属性为relative，这是为了让子元素定位时相对于它的位置。然后，分别为两张图片添加position: absolute属性，再为它们的top和left属性都设置成50%，这是为了让它们在水平和垂直方向上居中对齐。接下来，利用CSS3的transfrom属性，使用translate(-50%, -50%)来让图片在实现居中的同时，沿着X、Y轴各向左和向上移动自身宽度和高度的50%（即居中显示）。为了让第一张图片在第二张图片的上方，我们给第一张图片添加了z-index:1的属性。

以上就是实现两张图片重叠并居中的方法了，您可以根据实际需求调整代码来达到更完美的效果。