Рассмотрим несколько способов вертикального центрирования элемента с помощью CSS

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

<p class="center-by-absolute-margin">Centering</p>

.center-by-absolute-margin {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

Псевдокласс ::before

<p class="center-by-pseudo-class">Centering</p>

.center-by-pseudo-class::before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

line-height

<p class="center-by-line-height">Centering</p>

.center-by-line-height {
	height: 200px;
	line-height: 200;
}

table

<p class="center-by-table">Centering</p>

.center-by-table {
	display: table-cell;
	vertical-align: middle;
}

Flex

<div class="center-by-flex">
	<p>Centering</p>
</div>

.center-by-flex {
	display: flex;
	align-items: center;
}

Grid

<div class="center-by-grid">
	<p>Centering</p>
</div>

.center-by-grid {
	display: grid;
	align-items: center;
}

Относительно родителя

<div class="center-by-absolute-parent">
	<p class="center-by-absolute-child">Centering</p>
</div>

.center-by-absolute-parent {
	position: relative;
}

.center-by-absolute-child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

calc

<p class="center-by-calc">Centering</p>

.center-by-calc {
	height: 70px;
	position: relative;
	top: calc(50% - 35px);
}

align-content

<div class="container-center-by-align-content">
	<div class="child-center-by-align-content"></div>
</div>

.container-center-by-align-content {
  display: flex;
  align-content: center;
}

.child-center-by-align-content {
	width: 100px;
	height: 100px;	
}

Cпасибо за внимание