Swiper: Centering image horizontal and vertically

Created on 12 Nov 2019 · 1Comment · Source: nolimits4web/swiper

Posting here because no answers in Stack Overflow.

I'm trying to center an image inside the slide both horizontal and vertically. Kind of the same behavior when we put background-size: cover when it's a div's background image.

By default it shows the image from the top left corner, so I'm trying to change that behavior. What I've tried is:

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="banner.jpg">  
            <div class="caption-align">
                <div class="caption">
                    <h1>Title</h1>
                    <p>Description</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

img {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.swiper-container {     
    height: 650px;
}

.caption-align {
    display: flex;
    align-items: center;
}

Vertically it works fine. Horizontally it cuts the image somehow when pulling it to the left: https://i.stack.imgur.com/J1vT5.jpg

Without the X translate: https://i.stack.imgur.com/N8ooX.jpg

Any tips?

Source