Какими способами можно центрировать Div внутри Div?

Центрировать один div внутри другого можно несколькими способами — выбор зависит от раскладки.

Grid — самый короткий

.parent { display: grid; place-items: center; }

Flexbox

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

Или margin: auto у ребёнка во flex-контейнере.

Абсолютное позиционирование

.parent { position: relative; }
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Подходит для наложений поверх содержимого.

Только по горизонтали

.child { width: 300px; margin: 0 auto; }

Нюансы

Для вертикального центрирования у родителя должна быть высота (min-height: 100vh, фиксированная или от раскладки).

Коротко для собеседования

display: grid; place-items: center, flex с justify-content и align-items, absolute с translate(-50%, -50%) или margin: 0 auto по горизонтали.

Подробнее: MDN — Центрирование элемента