1] Центрировать Div по вертикали и горизонтали с помощью Transform и Translate

  • Сначала установите для свойства position родительского элемента значение relative.
  • Затем установите свойство position дочернего элемента на absolute, top на 50% и left на 50%.
  • Наконец, используйте transform: translate(-50%, -50%), чтобы действительно центрировать дочерний элемент:

.parent_div {
   font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}
.child_div {
   width: 50px;
  height: 50px;
  background-color: red;
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2] Центрируйте Div по вертикали и горизонтали с помощью Flexbox

  • Flexbox — это самый простой способ центрировать элемент как по вертикали, так и по горизонтали.
  • Чтобы центрировать дочерние элементы по горизонтали и вертикали, примените justify-content: center и align-items: center к родительскому элементу:
<div class="container">
  <div class="child"></div>
</div>
.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Center vertically and horizontally */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

Ссылка — https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/