vertically center text in navigation bar - html

Question

I am trying to make a navigation bar in which the buttons' text will be aligned in the center vertically.
Currently, everything is working fine with the navigation bar besides the vertical align.
I have tried many methods such as with line height, padding to the top and bottom (messes up my heights so the text divs overflow), flex, and table display.
html,
body {
height: 100%;
margin: 0px;
}
#nav {
height: 10%;
background-color: rgb(52, 152, 219);
position: fixed;
top: 0;
left: 0;
width: 100%;
color: white;
font-family: Calibri;
font-size: 200%;
text-align: center;
display: flex;
}
#nav div {
display: inline-block;
height: 100%;
align-items: stretch;
flex: 1;
}
#nav div:hover {
background-color: rgb(41, 128, 185);
cursor: pointer;
}
<div id="main">
<div id="nav">
<div><a>Home</a></div>
<div><a>Page2</a></div>
<div><a>Page3</a></div>
<div><a>Page4</a></div>
<div><a>Page5</a></div>
</div>
</div>
All help is appreciated, thank you!

Answer 1

You can use the table and table-cell method. Basically you need to add the css property display: table to the parent element and display: table-cell; vertical-align: middle to the children ones.
Increased height for demo purpose.
#nav {
height: 50%;
background-color: rgb(52, 152, 219);
position: fixed;
top: 0;
left: 0;
width: 100%;
color: white;
font-family: Calibri;
font-size: 200%;
text-align: center;
display: table;
}
#nav div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
#nav div:hover {
background-color: rgb(41, 128, 185);
cursor: pointer;
}
<div id="main">
<div id="nav">
<div><a>Home</a>
</div>
<div><a>Page2</a>
</div>
<div><a>Page3</a>
</div>
<div><a>Page4</a>
</div>
<div><a>Page5</a>
</div>
</div>
</div>

Answer 2

With flexbox, you were very close.
Because a flex formatting context exists only between parent and child, your display: flex on the #nav container was reaching the divs, but not the anchors.
You need to make the individual divs flex containers, as well, so flex alignment properties can apply to the anchor elements.
html,
body {
height: 100%;
margin: 0px;
}
#nav {
height: 10%; /* This value will hide the nav bar on smaller windows */
background-color: rgb(52, 152, 219);
position: fixed;
top: 0;
left: 0;
width: 100%;
color: white;
font-family: Calibri;
font-size: 200%;
text-align: center;
display: flex; /* Will apply to child div elements, but not anchor elements */
}
#nav div {
/* display: inline-block; */
height: 100%;
align-items: stretch;
flex: 1;
display: flex; /* NEW; nested flex container */
justify-content: center; /* NEW; align anchor elements horizontally */
align-items: center; /* NEW; align anchor elements vertically */
}
#nav div:hover {
background-color: rgb(41, 128, 185);
cursor: pointer;
}
<div id="main">
<div id="nav">
<div><a>Home</a></div>
<div><a>Page2</a></div>
<div><a>Page3</a></div>
<div><a>Page4</a></div>
<div><a>Page5</a></div>
</div>
</div>