JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div class="wrapper">
        <div class="bandname">test<br>test<br>test<br> test</div>
    </div>
</div>

CSS

#header {
	position:fixed;
	height: 6em;
	display:block;
	width: 100%;
	background: rgb(0, 255, 255); /* Fall-back for browsers that don't support rgba  */         
    background: rgba(0, 255, 255, 1);
	z-index:9;
	text-align:center;
	color: #000000;	
}
													
.bandname
{
  display: inline;
  font-size: 2.8em;
  padding: 0px 0px 0 0;
  background: rgba(0, 255, 0, 1);
}
.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}