JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test"><h1 class="text">test</h1></div>

CSS

.test{
	background: red;
	height: 300px;
	width: 300px;
	border-radius: 150px;
	display: inline-block;
	position: relative;
    
    text-align: center;
}

.test .text{
	display: inline-block;
	background: green;
	margin: auto;
	position: relative;
    
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}