Отображение 2 изображений в строке рядом, по центру по горизонтали и вертикали

Скажем, что я хотел бы отобразить 4 изображения на моей веб-странице следующим образом:

img1 img2

img3 img4

Я хочу, чтобы каждое изображение занимало 50% ширины веб-страницы, но если его ширина меньше 50%, чтобы быть сосредоточенной в этом пространстве (так что мне нужно, чтобы она была сосредоточена на 50% левой ширины).

Точно так же я хочу, чтобы изображение с меньшей высотой было центрировано относительно высоты изображения на его стороне.

Пример:

То, что я пробовал до сих пор:

HTML:

<div class="imgGroup">
    <div class="groupImg">
        <img src="images/speed.png" alt="Wind Speed Graph">
    </div>
    <div class="groupImg">
        <div class="strongCenter">
            <img src="images/wind_now.png" alt="Wind Direction Now">
        </div>
    </div>
</div>

CSS:

.groupImg img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    float: left;
    max-width: 50%;
    border-radius: 10px;
}

Я сгруппировал изображения 2-2 в imgGroup с мыслью, что мне нужно работать с высотой div, чтобы imgGroup изображения внутри.