js 如何实现banner一屏显示的情况下上下居中？

Question

项目中banner是一屏显示（不管多大的屏幕就是一整屏显示），本来通过background-img写，然后background-position:center center.就好了，但是要求必须把banner图放到img容器中，怎样设置这个img在swiper中上下左右居中（一屏情况下）。

Answer 1

方法一：

html,body, .swiper-container{height:100%;}

方法二：

html,body .swiper-container{

    display:flex;

    flex-direction: column;

    justify-content: space-between;

    flex:1;

}