你如何正确地将元素垂直中心线与 CSS 的子元素垂直中心线对齐？ [复制]答案

【问题标题】：How do you properly align an elements vertical centerline with a childs vertical center line with CSS? [duplicate]你如何正确地将元素垂直中心线与 CSS 的子元素垂直中心线对齐？ [复制]
【发布时间】：2021-02-05 01:44:54
【问题描述】：

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

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

这确实是它最简单的形式。现在悬停工作正常，我想做的是使父菜单的垂直中心和飞出的子菜单对齐。这张图片展示了这个想法：

当前状态

理想状态

如图所示，垂直中心（跨越元素高度一半的线）基本上与每个中心对齐。

现在，绿色孩子是绝对定位的，但是当我将相对定位添加到父孩子时，它开始表现出一些不稳定和奇怪的行为。我想知道是否有办法用 flexbox 做到这一点，但我还没有找到解决方案。

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

需要考虑的事项：

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

【问题讨论】：

请创建一个 sn-p 或使用最小可重现代码？

标签： css flexbox alignment

【解决方案1】：

这段代码应该可以工作：

.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>

【讨论】：