Center images in a <section> - html

Question

I have a <section> tag in which there are 3 images. How can I center them for fullscreens?
The size of my screen is 22.9 ".
here is the code:
<section class="gallery">
<div class="container-fluid">
<div class="row">
<div class="fw mix-container home-gallery">
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-002.jpg""/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-003.jpg""/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-004.jpg""/>
</div>
</div>
</div>
</div>
</div>
Thank you for your answers
Best regards.

Answer 1

I have included a code snippet below that will run.
Essentially you make the images inline-block so they sit next to each other.
Then you can set the images parent container to be left 50%, and offset it with transform:translate();
You can change the width of the images as needed but the same logic should still apply.
.mix {
width: 200px;
height: 100px;
border: black solid 1px;
display: inline-block;
}
.mix-container {
position: relative;
display: inline-block;
left: 50%;
transform: translate(-50%, 0);
}
<section class="gallery">
<div class="container-fluid">
<div class="row">
<div class="fw mix-container home-gallery">
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-002.jpg"/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-003.jpg"/>
</div>
</div>
<div class="mix landscape portrait">
<div class="item-img">
<img src="images/parfum-aux-agrumes-004.jpg"/>
</div>
</div>
</div>
</div>
</div>
</section>