父元素设为vertical-align:top时，如何实现子元素垂直居中？

你之前的写法无效，核心原因是**vertical-align属性的作用逻辑和你理解的不一样**：它是用来控制行内/inline-block元素在当前文本行的垂直对齐，而非父容器内部子元素的对齐。父元素的vertical-align: top是控制它自身在外部上下文的位置，子元素的vertical-align: middle只是相对于父元素的文本基线对齐，完全达不到父子垂直居中的效果。

下面提供三种无需知道元素具体高度的可行方案：

方案1：Flex布局（最推荐） #

Flex是现代布局的首选方案，只需两行代码就能实现垂直居中，兼容性覆盖绝大多数现代浏览器：

#parent {
  display: flex;
  align-items: center; /* 实现子元素垂直居中 */
  /* 可选：添加 justify-content: center; 同时实现水平居中 */
  height: 1em;
  width: 20px;
  background-color: rgba(100,100,100,0.2);
} 

#child {
  width: 5px;
  height: 2em;
  background-color: blue;
}

HTML结构保持不变。

方案2：Grid布局 #

Grid布局代码更简洁，可同时实现垂直+水平居中：

#parent {
  display: grid;
  place-items: center; /* 一键实现垂直+水平居中 */
  height: 1em;
  width: 20px;
  background-color: rgba(100,100,100,0.2);
} 

#child {
  width: 5px;
  height: 2em;
  background-color: blue;
}

方案3：绝对定位+Transform（兼容旧浏览器） #

如果需要兼容IE9及以上版本，可采用这个方案：

#parent {
  position: relative; /* 开启相对定位，作为子元素绝对定位的参照容器 */
  height: 1em;
  width: 20px;
  background-color: rgba(100,100,100,0.2);
} 

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将自身往回偏移一半尺寸，实现精准居中 */
  width: 5px;
  height: 2em;
  background-color: blue;
}

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