如何在父div内垂直居中display: flex布局的子元素？

不生效的常见原因 #

• 父容器没有设置明确的垂直高度
  align-items: center基于父容器的可用垂直空间实现居中，如果父容器高度默认是auto（仅由子元素高度撑开），父容器和子元素高度完全相等，自然看不出居中效果。可以给父容器设置固定高度比如height: 300px测试验证。
• 属性写在了错误的元素上
  align-items: center是Flex容器的属性，必须写在设置了display: flex的父元素上，写在子元素上不会生效。
• 样式被更高优先级的规则覆盖
  检查父容器的样式中，是否有后定义的align-items属性（比如默认值align-items: stretch）、或者带!important的同属性规则，覆盖了你写的居中配置。
• Flex主轴方向被修改
  如果你给Flex容器设置了flex-direction: column，此时交叉轴变为水平方向，align-items控制的是水平对齐，要实现垂直居中需要改用justify-content: center属性。
• 百分比高度未生效
  如果你给父容器设置的是height: 100%，需要确保父容器的所有上级元素（包括html、body）都设置了明确的高度，否则百分比高度会失效，父容器高度还是自适应内容。
• 子元素单独设置了对齐规则
  如果子元素写了align-self: flex-start/stretch等属性，优先级高于父容器的align-items，会导致全局居中配置不生效。

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