使用flex-direction:column时如何实现子div在页面垂直水平居中

当flex容器设置flex-direction: column时，主轴为垂直方向：

• justify-content 控制子元素在主轴（垂直方向）的对齐
• align-items 控制子元素在交叉轴（水平方向）的对齐

你当前的代码只配置了垂直方向居中，缺少水平方向居中的配置，所以子元素会呈现左对齐效果。

仅需要修改.wrapper的CSS规则，新增align-items: center属性即可实现需求，修改后的代码如下：

.wrapper{
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  height: 90vh;
  justify-content: center; /* 保留原有配置，控制垂直方向居中 */
  flex-direction: column;
  align-items: center; /* 新增这一行，控制水平方向居中 */
}

修改后不会影响你原有输入框50%宽度的配置，所有子元素会同时实现垂直、水平居中效果。

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