JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
   <div class="letter-1 float-content">C</div>
   <div class="letter-2">Вот так можно сделать если у блока нет фикс высоты!</div>
</div>

CSS

.wrapper{
  position:relative;
  padding:100px 0;
  background:#1F1F1F;
}
.letter-1{
  z-index:1;
  color:#ffffff;
  text-align:center;
  font-size:30px;
}
.letter-2{
  z-index:2;
  color:#AC829F;
  text-align:center;
}
.float-content{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	        transform: translateY(-50%);
}