为什么“top：50％; translateY（-50％）;”在同一父母的某些元素上创造一个比它应该更低的差距？

Question

我的顶栏有这个布局：

根据设计，所有元素应垂直居中，这是我的代码：

https://codepen.io/anon/pen/gXGxWz

不幸的是，top-bar_right-part不能很好地与班级core_vertical-align（请注意左侧菜单的工作方式）很好地完成了这一点：

position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);

根据codepen，这是它的外观：

这是什么问题？ 此外，右侧部分的元素不会继承正确的高度（顶部栏），左侧菜单的位置也是如此。

Answer 1

如果你对不同的更好的方法感到满意，我会使用flexbox 导航栏中的垂直中心元素。 将元素的父元素设置为： -display：flex; -align-items：center; 它会将所有元素垂直对齐到中心。 欲了解更多信息： align-items center

Answer 2

这是正在发生的事情的开始。问题是position: absolute;元素是根据最接近的position: relative;父元素放置的。

因此，当您尝试执行top: 50%; transform: translateY(-50%)时，它会根据.top-bar_right-part的大小和位置垂直居中。

我已将链接到已更改的笔，该笔在将height: 100%添加到行16后显示正确放置的元素（更多）。这会将右浮动div的高度设置为父级的100％，从而将其中的position: absolute;元素与整个导航的大小相同。给你一个正确垂直居中的项目。

这里要记住的主要事情是，当您使用绝对元素进行区域划分时，它的位置完全基于最近的相对父级。因此，请确保相对父级以及绝对子级正确定位。

第16-18行改变： https://codepen.io/KyleCRat/pen/bYvWJz