CSS如何实现元素垂直对齐？设置margin: auto 0后div仍置顶如何解决

问题根因 #

普通文档流中的块级元素，margin: auto 0 的垂直方向自动边距不会生效，仅水平方向的auto值可正常计算。只有父容器开启Flex布局或Grid布局时，垂直方向的auto margin才会按照预期工作。

修复方案 #

要实现顶部导航栏左右分栏+子元素垂直居中，最简便的方式是给父容器开启Flex布局，修改后的样式如下：

a.logo {
  text-decoration: none;
  color: inherit;
}
.layout-topbar {
  height: 4rem;
  /* 开启Flex布局 */
  display: flex;
  /* 左右子区域分别贴靠容器两端 */
  justify-content: space-between;
  /* 所有子元素默认垂直居中 */
  align-items: center;
}
/* 原有.layout-topbar-left的样式可以完全删除，父容器已经处理了垂直对齐 */

补充说明 #

• 如果后续需要在左右区域内添加更多元素，Flex布局也可以很方便的处理内部对齐逻辑，不需要手动计算边距
• 如果仅需要实现单行文本垂直居中，也可以给.layout-topbar-left设置line-height: 4rem，不过该方案扩展性较差，仅适合单行内容场景

内容的提问来源于stack exchange，提问作者J4N