html - Vertically Center a Paragraph -

i have problem, not able vertically align text, tried searching , didn't find solution problem.

i trying make nav, can hover on scale nav height transition, text in div won't able center vertically.

here css

.nav-links-typo {     font-size: 17px;     text-decoration: none;     text-transform: uppercase;     text-align: center; } .nav-bar {     position: fixed;     height: 3%;     width: 100%;     max-height: 100%;     max-width: 100%;     background-color: coral;     transition: 1.2s; } .nav-bar:hover {     height: 5%;     transition: 1.2s; } .nav-links-block {     min-height: 100%;     width: 10%;     margin-left: 5%;     background-color: lightgray;     display: inline-table;     text-align: center; } 

and here html

<div class="nav-bar">      <div class="nav-links-block-platzhalter"></div>      <div class="nav-links-block">          <a class="nav-links-typo">startseite</a>      </div>      <div class="nav-links-block">          <a class="nav-links-typo">rest api console</a>      </div>      <div class="nav-links-block">          <a class="nav-links-typo">grafana</a>      </div>    </div> 

figured out myself: instead of setting height gonna add padding top , bottom.

.nav-bar:hover {     padding-top: 1%;     padding-bottom: 1%;     transition: 1.2s; }