如何使用CSS将元素的垂直中心线与子元素的垂直中心线正确对齐？

如何解决如何使用CSS将元素的垂直中心线与子元素的垂直中心线正确对齐？

我有一个菜单（向左导航），其中有子菜单，当它们悬停时会弹出。它由像这样堆叠的无序列表组成：

<ul>
   <li>Item</li>
   <li>Item w/ Sub
       <ul class="sub">
            <li>sub 1</li>
       </ul>
   </li>
<ul>

这实际上是最简单的形式。现在，悬停效果很好，我想做的是使父菜单的垂直中心和弹出子菜单对齐。此图演示了这个想法：

当前状态

期望状态

如您在图像中所见，垂直中心（跨越元素高度一半的线）基本上彼此对齐。

现在，绿色孩子的位置绝对正确，但是当我向父孩子添加相对位置时，它开始表现出一些不稳定和奇怪的行为。我想知道是否可以通过flexBox做到这一点，但是我还没有找到解决方案。

如何使父母和孩子的垂直中心对齐？

注意事项：

• 子菜单的高度可变
• 它们是固定宽度（260像素）
• 父菜单（蓝色框）的高度固定。

解决方法

此代码应该有效：

.sub {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  ...
}

示例：

.menu {
  display: inline-block;
  list-type: none;
  padding-left: 0;
  border: 1px solid black;
}

/* First-level children */
.menu > li {
  position: relative;
  background: #eee;
  padding: 16px;
}

.menu > .parent {
  background: yellow;
}

.menu > .parent:hover {
  background: gold;
}

.menu > li + li {
  border-top: 1px solid grey;
}

/* Second-level children */
.parent:hover .child {
  display: block;
}

.child {
  display: none;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  list-style-type: none;
  padding-left: 0;
  border: 1px solid black;
}

.child > li {
  background: orange;
  padding: 8px;
  white-space: nowrap;
}

.child > li + li {
  border-top: 1px solid grey;
}

<ul class="menu">
 <li>Menu 1 (no hover)</li>
 <li class="parent">
   Menu 2 with child : hover this one
   <ul class="child">
     <li>Menu 1</li>
     <li>Menu 2</li>
     <li>Menu 3</li>
   </ul>
 </li>
 <li>Menu 3 (no hover)</li>
</ul>