How to vertically center divs in my navbar [duplicate] - html

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
My question is simple, how I'm able to vertically center divs in my navbar so they will be always in the center no matter what height of the navbar i set. I have already tried vertical-align: middle; but that didn't work for me.
HTML:
<div class="navbar">
<div class="buttons">
<button class="homeButton"><i class="fas fa-home"></i></button>
<button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
</div>
<div class="links">
Programování
Anglický jazyk
Psychologie
Zdraví a psychohygiena
Matematika
Logické úlohy
Programy
Ostatní
</div>
</div>
CSS:
.navbar {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 0px 0px 10px 10px;
width: 100%;
height: 100px;
font-family: Open Sans;
background: white;
position: fixed;
}
.buttons {
float: left;
}
.links {
float: right;
}

Answer 1

using float for this is a deprecated solution, better to do it like this:
.navbar {
display: flex;
justify-content: center;
align-items: center;
}

Answer 2

You could try to place the items halfway down a div. e.g.
.verticalCenter {
top: 50%;
}
then just add it to the buttons div.
<div class="buttons verticalCenter"> <!-- added here -->
<button class="homeButton"><i class="fas fa-home"></i></button>
<button class="schoolButton"><i class="fas fa-graduation-cap"></i>mySchool</button>
</div>

Answer 3

You can use flexbox.
.navbar {
/*rest of your code*/
display: flex;
justify-content: center;
align-items: center;
}