[分享]css两张图片垂直居中显示

CSS中让两张图片垂直居中显示可能是网页设计中经常会遇到的问题。下面介绍两种方法实现这个效果。

 .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container img {
        margin: auto;
    } 

使用flexbox布局，将容器设置为flex，然后设置align-items和justify-content属性为center。img元素设置margin属性为auto即可实现。

 .container {
        position: relative;
    }
    .container img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    } 

使用绝对定位，将容器设置为相对定位，img元素设置为绝对定位，并将top属性设置为50%。然后使用transform属性中的translateY函数将图片向上移动自身高度的一半。

这两种方法均可实现让两张图片垂直居中显示的效果。需要根据实际情况选择方法，以及配合其他样式进行调整。