Align Main Slider image to center

Question

I'm working on a small project, and have one little problem that I don't know how to resolve myself. I have an image gallery with many images, but I want the active image to be centered, without changing the resolution or width/height ratio. Link for the issue here. Login is user / password. I tried to manipulate with this CSS:

.img {
    margin-left: 200px;
}

However, it seems to ruin the bottom slider. What should I do to center the main image without changing the image ratio? This example image shows what I want to do.

Answer 1

Try adding:

.flex-active-slide {
  text-align: center;
}

Answer 2

Try this

.imgs {
    margin-left: auto;
    margin-right auto;
}

or you could do this

<div class="imgs" align="center">
<img src="https://source.unsplash.com/random/200x200" />
</div>