What is the best way to vertically center text with CSS (in my situation)?

Issue

I am trying to make a navigation bar, and this navigation bar should be split into columns with CSS grid, so that I can add my different links into these different blocks. Here is the HTML and CSS:

HTML:

<div id="navbar">
  <div id="navContainer">
    <a href="index.html" id="profile" class="link">Andreas Nagelgaard</a>
  </div>
</div>

CSS:

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  border-bottom: 5px solid black;
}

#profile {
  grid-column-start: profile;
}

#navContainer {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  display: grid;
  grid-template-columns: [profile] 2fr [emptySpace] 3fr [otherone] 1fr [othertwo] 1fr [otherthree] 1fr;
}

.link {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
}

Now, I want to have the links centered vertically within the navigation bar, and I have found a few different methods: using flexbox and align-items (this might create problems with the spacing, because I want to have an empty space in the middle), using vertical-align: middle and display: table, but this could lead to far too many containers. What is the best solution for my situation (without using flexbox)?

Solution

You can add line height:

#profile{
  line-height:90px;
}

Here you give #profile the line-height size same as navbar height so it'll come center vertically

Or

#profile{
   margin: auto 0;
}

Answered By - Atena