Bars inside mobile menu button do not appear in vertical center - html

Question

With the code below I created a mobile menu button .container inside my .navigation. All this works fine so far.
However, I want that the .bars inside the mobile menu button to be vertically centered. I tried to go with vertical-align: center; but could not make it work.
What do I have to change in my code so the .bars in the mobile menu button .container get vertically centered?
You can also find my code here
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
vertical-align: center;
}
.bar1, .bar2, .bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin-top: 8%;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>

Answer 1

Because you are already using flexbox, add the following styles to bars:
display: flex;
justify-content: center;
flex-direction: column;
and add margin: 4% 0 for the bar1,bar2 and bar3
See demo below:
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.bar1,
.bar2,
.bar3 {
height: 10%;
width: 100%;
background-color: #333;
margin: 4% 0;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>

Answer 2

The easiest way would be to use display: flex; on .bars; Then flex-direction: column; and justify-content: center;
.bars {
height: 100%;
width: 100%;
/* new stuff here: */
display: flex;
flex-direction: column;
justify-content: center;
}
This will work, but the bars won't look quite right because .bar1 has a margin-top of 8%. If you only apply margin-top to .bar2 and .bar3 then it will look right.
.bar2, .bar3 {
margin-top: 8%;
}
body {
margin: 0;
}
.header {
width: 80%;
height: 30%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
height: 100%;
width: 20%;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: fuchsia;
}
.bars {
height: 100%;
width: 100%;
/* new stuff here: */
display: flex;
flex-direction: column;
justify-content: center;
}
.bar1, .bar2, .bar3 {
height: 10%;
width: 100%;
background-color: #333;
}
.bar2, .bar3 {
margin-top: 8%;
}
<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<div class="container">
<div class="bars">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</nav>
</div>

Answer 3

You can use display:flex
.bars {
display: flex;
align-items: center;
flex-wrap: wrap;
}