html - 为什么 "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%);

根据代码笔，它是这样的:

这里的问题是什么？ 此外，右侧部分的元素不会继承正确的高度(顶部栏)，而左侧菜单会继承。

Answer 1

如果您接受不同的更好的方法，我会使用 flexbox 来在导航栏中垂直居中元素。将元素的父级设置为:-显示: flex ；-对齐元素:居中；它会将所有元素垂直对齐到中心。欲了解更多信息: align-items center