How to center vertically elements of a menu

Question

Normally I put position: Absolute/relative (depending), tranformY (50%) and top: -50%, however, as I add more elements this trick starts to fail. I would like a result like the image. What other tricks do you use?

Answer 1

flex display in container with align-items: center

.container {
  display: flex;
  align-items: center;
}

or, if you need more cross-browser, inline-block display in Childrens with vertical-align: Middle

 .children {
   display: inline-block;
   vertical-align: middle;
 }