如何创建带分隔边框的两个可点击居中Div？

嘿，我看你现在的核心问题是想在两个可点击的居中Div之间加分隔边框，但当前代码里的<hr>可能因为高度设置的问题没正常显示对吧？咱们一步步来调整：

问题分析 #

你当前的CSS里，.goto和.no都设置了height: 100%，在flex column布局的容器里，这两个元素会各自撑满整个容器高度，直接把中间的<hr>挤得完全看不见了；而且用margin-top:20%来居中文字也不够适配不同屏幕尺寸。

方案一：用Div边框代替HR（更简洁） #

这个方案直接给第一个Div加底部边框作为分隔线，同时用Flex布局让两个Div平分高度、内部文字完美居中：

修改后的CSS #

/* 让容器占满可视区域高度，子元素垂直排列 */
.homescreen-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* 让两个可点击Div平分容器高度，内部用Flex实现文字居中 */
.goto, .no {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer; /* 给鼠标加指针，提示可点击 */
}

.goto {
  background-color: green;
  border-bottom: 3px solid #333; /* 这里就是两个Div之间的分隔边框，可自定义粗细、颜色 */
}

.no {
  background-color: red;
}

修改后的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>

方案二：保留HR标签，调整样式让它显示 #

如果你更倾向于用<hr>作为分隔线，那需要调整它的样式，同时确保Flex布局给它留出显示空间：

修改后的CSS #

.homescreen-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.goto, .no {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.goto {
  background-color: green;
}

.no {
  background-color: red;
}

/* 自定义HR的样式，去掉默认边框，设置高度和颜色 */
.border {
  margin: 0;
  height: 3px;
  background-color: #333;
  border: none;
  /* 如果想让分隔线不是全屏宽，可以加这个：width: 80%; margin: 0 auto; */
}

修改后的HTML #

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

小提示 #

• 用flex:1让两个Div平分高度，比固定height:100%更灵活，适配各种屏幕尺寸
• 内部用justify-content: center和align-items: center实现文字垂直水平居中，比margin-top:20%更精准
• 分隔线的颜色、粗细都可以根据需求自定义，比如把#333换成你想要的颜色，3px换成其他数值

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