Q: Centering text inside div in navbar I want to align this text ZENZZEX in the first grid. Perfectlly vertical and horizontal,  I already aligned it horizontal.


body{
  margin: 0;;
}

.navGrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 40px;
    position: fixed;
  width: 100%;
  top:0;
  background-color: white;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
  
  
}
.span-col-4{
  grid-column: span 4 / auto;
}



.navGrid .first{
  color: black;
  text-align: center;
  font-family: 'Dosis', sans-serif;
  font-size: 1.2em;
  font-weight: 800;
  position: relative;
  top: 20%;
 

}


.navGrid .first:hover{
  cursor: pointer;
  font-size: 1.28em;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div class="navGrid">
  <div class="first">ZENZZEX </div>
  <div class="span-col-4 second">Item 2</div>
  <div class="third">Item 3</div>
</div>

<div class="content"><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, adipisci quasi eius nesciunt veniam exercitationem dolorem aperiam id vero perferendis voluptatum ab ad laborum quaerat? Minus exercitationem iure assumenda perspiciatis dolorem ullam? Dolorum accusamus, possimus culpa molestias ipsum sequi animi numquam omnis delectus odio magni id. Obcaecati quo, reiciendis id explicabo veritatis qui excepturi distinctio autem voluptate quaerat dolorem?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla iure ullam, ad nisi distinctio cumque molestiae vitae porro ex nihil facere harum delectus in laborum fugiat corporis maiores deserunt reiciendis laboriosam alias rerum. Nisi corrupti nostrum esse perferendis labore animi iure, nam aut laborum tenetur officia veniam consectetur odio, maxime consequatur deleniti illum harum et dicta quibusdam numquam sit commodi id libero. Facilis, incidunt reprehenderit ad beatae omnis obcaecati adipisci impedit, non quo porro deserunt nemo! Sed quo non reprehenderit! Voluptatibus aspernatur, praesentium harum, quod incidunt fugiat quidem adipisci, itaque pariatur minima deserunt porro velit? Laboriosam, minus! Sit, neque quibusdam.</h1></div>
</body>
</html>



A: You can do this using flexbox:
.navGrid .first {
    color: black;
    text-align: center;
    font-family: 'Dosis', sans-serif;
    font-size: 1.2em;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

