如何实现div上下排列且整体居中，解决flex布局justify-content失效问题

当你把flex容器的flex-direction设为column时，flex的主轴和交叉轴方向会互换：

• 主轴变为垂直方向，此时justify-content控制的是子元素在垂直方向的对齐
• 交叉轴变为水平方向，子元素的水平对齐需要用align-items来控制

你的代码里只设置了justify-content: center，这会让子元素在垂直方向居中，但水平方向没有对齐，所以看起来像是属性失效。要同时实现容器内子元素的垂直排列和水平居中，只需要给.border添加align-items: center即可，主容器的屏幕居中逻辑保持不变。

修改后的完整CSS代码：

.border {
  height: 300px;
  width: 700px;
  margin: auto;
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  border: 3px solid;
  border-radius: 45px;
  border-color: black;
  display: flex;
  justify-content: center; /* 控制垂直方向居中 */
  align-items: center; /* 新增：控制水平方向居中 */
  flex-direction: column; /* 保持子元素垂直排列 */
}

.calcText {
  color: black;
  font-size: 44px;
  margin: 35px;
}

.value {
  height: 10px;
  width: 50px;
}

这样修改后：

1. 主容器.border依然会固定在屏幕正中间
2. calcText和value两个子元素会垂直排列，同时水平方向居中对齐，完全满足你的需求。

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