如何在父div中实现两个上下排列的子div的水平与垂直居中？

你的问题出在Flex布局默认是横向排列（row），导致两个子div并排显示。只需调整几个CSS属性就能实现预期的垂直排列+整体居中效果：

关键修改点： #

• 给.content添加flex-direction: column，将子元素排列方向改为垂直
• 可通过gap属性控制两个子div的间距（按需调整数值）
• 移除子元素的display: inline-block，Flex子元素无需该属性
• 确保.content的height: 100%生效，需给html和body设置高度（若之前未配置）

修改后的完整CSS代码： #

/* 确保父级高度生效，让.content的100%高度起作用 */
html, body {
  height: 100%;
  margin: 0;
}

.content {
  display: flex;
  flex-direction: column; /* 核心：切换为垂直排列 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
  gap: 10px; /* 两个子div的间距，可按需修改 */
  margin-left: 5px;
  background-color: lightgray;
  height: 100%;
  width: 80%;
  border-radius: 25px;
}

.cliente_info {
  width: 90%;
  height: 45%;
  background-color: azure;
}

.cliente_table {
  width: 90%;
  height: 45%;
  background-color: rgb(156, 204, 204);
}

HTML代码无需修改： #

<div class="content">
  <div class="cliente_info">
  </div>
  <div class="cliente_table">
  </div>
</div>

修改后，两个子div会垂直排列，且整体在.content容器中实现水平与垂直居中，符合预期效果。

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