Долгое время размещение элемента по центру родительского блока, как по горизонтали, так и по вертикали, являлось головной болью не только для начинающих веб-разработчиков. Однако, появление Flexbox-модели разметки для отображения элементов, стало, поистине, волшебной таблеткой.

Итак, для достижения желаемого результата достаточно определить свойства родительского элемента:

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

Но и это не все, есть еще одно изящное, но не очень распространенное решение: такого же результата можно добиться, задав margin: auto для центрируемого элемента:

.parent {
    display: flex;
}

.child {
    margin: auto;
}

Выбирайте подходящий Вам вариант.

Спасибо за внимание.