如何使用Flex实现带分隔边框的两个居中Div布局？

我来帮你搞定这个Flex布局的需求！先梳理下现有代码里的几个小问题：

• 子元素.goto和.no设置了height:100%，会让它们强行撑满外层容器高度，导致布局超出预期
• 单独用.border div做分隔，其实可以用CSS边框属性更简洁，还能减少多余DOM元素

下面是调整后的实现方案，完美满足「外层容器恰好容纳两个带分隔边框的居中div」的需求：

修改后的CSS代码 #

/* 外层容器：垂直Flex布局，内容自适应，整体居中 */
.homescreen-content {
  display: flex;
  flex-direction: column;
  /* 去掉固定宽高，让容器根据子元素尺寸自动适配 */
  align-items: center;
  justify-content: center;
  /* 可选：给容器加一点内边距，避免内容贴边 */
  padding: 1rem;
}

/* 两个子div：统一样式，内部内容垂直+水平居中 */
.goto, .no {
  width: 100%;
  /* 用内部Flex实现内容完全居中，比text-align更彻底 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 给内容加内边距，增加呼吸感 */
  padding: 2rem;
  /* 确保内边距不会撑宽元素 */
  box-sizing: border-box;
}

.goto {
  background-color: green;
}

.no {
  background-color: red;
  /* 用顶部边框替代单独的分隔div，简洁高效 */
  border-top: 10px solid grey;
}

/* 移除原来的.border类，不需要额外DOM节点了 */

修改后的HTML代码 #

<div class="homescreen-content" scroll="false">
  <div (click)="open()" class="goto">
    <h2>TITLE 1 CENTRED</h2>
    <p>SOME CENTRED TEXT</p>
  </div>
  <div (click)="open()" class="no">
    <h2>TITLE 2 CENTRED</h2>
    <p>SOME CENTRED TEXT</p>
  </div>
</div>

关键细节说明 #

• 外层容器去掉了固定宽高，会自动根据子元素的实际尺寸收缩/扩展，实现「恰好容纳」的效果
• 子元素用内部Flex布局，确保文字、标题等所有内容都能垂直+水平居中，比单纯的text-align:center更可靠
• 用border-top替代单独的分隔div，既减少了DOM节点，又能让分隔线和子元素完美衔接
• box-sizing: border-box保证子元素的内边距不会突破设置的宽度，布局更可控

如果想限制子元素的最大宽度（避免大屏幕上内容过宽），可以给.goto和.no加个max-width: 600px之类的属性，体验会更好~

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