如何实现div内部各元素垂直居中？使用vertical-align不生效该如何解决

问题排查 #

首先vertical-align属性仅适用于行内元素、行内块元素和表格单元格，你已经给容器设置了flex布局，该属性自然不会生效，尝试是无效的。
其次flex布局的垂直居中逻辑是基于父容器的高度做对齐的，你当前的.banner没有设置任何高度规则，容器高度完全由内部文本内容撑开，没有多余的垂直空间，自然看不出居中效果。

修复方案 #

只需要给.banner添加明确的高度即可，如果你需要banner占满整个浏览器视口高度，推荐使用min-height: 100vh，同时可以清除body默认边距避免顶部留白：

/* 清除浏览器默认的body外边距，避免顶部出现多余空白 */
body {
  margin: 0;
}
.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 新增高度规则，可根据业务需求调整为固定高度，例如 height: 600px */
  min-height: 100vh;
}

HTML部分无需修改，调整后即可实现预期的垂直居中效果。

效果参考 #

当前实现效果：

预期目标效果：

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