Cacher is the code snippet organizer for pro developers

 


<header class="header">
            <div class="logo-box">
                <img src="img/logo-white.png" alt="Logo" class="logo">
            </div>
            <div class="text-box"> // You must wrap up everything in a div 
                    <h1 class="heading-primary"> 
                            <span class="heading-primary-main">Outdoors</span>
                            <span class="heading-primary-sub">is where life happens</span>
                        </h1>
            </div>
           
        </header>
        
  
 //CSS CODE
  
  .text-box{
  position: absolute;
  top: 40%; // In relation to the parent element 
  left: 50%; // in relation to the parent element
  transform: translate(-50%,-50%); // in relation to the containing elements (header-primary_+)
}