How to center an element on the cross axis on hover (flexbox)?

Question

css

Horizontal site menu. It is necessary to describe the hover behavior.

Initial view:

On hover:

Links need to be centered on the vertical axis.

CSS code:

/* Menu Styles */
.menu {
  background: #313030;
  height: 12vh;
  display: flex;
  justify-content: space-around;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  text-transform: uppercase;
  display: inline-block;
  margin-right: 2vh;
  padding-left: 3vh;
  padding-right: 3vh;
}

li:hover {
  background: #ff3f40;
  height: 12vh;
  margin-right: 2vh;
  padding-left: 3vh;
  padding-right: 3vh;
}

a {
  color: #e0e0e0;
}

a:hover {
  text-decoration: none;
  color: #e0e0e0;
}

nav {
  display: flex;
  align-items: center;
}

Answer 1

you add height not to hover but to default and with hover change only background or make padding height li