Flexbox纵向分布不均：标题无法在两条线间居中

问题核心 #

当前布局存在两个关键问题：

• 重复使用id="line"违反HTML规范（id必须唯一）
• 固定容器高度10vw搭配justify-content: space-between，导致标题与底部线条的间距被强制压缩，无法保证合理的内边距

修改后的代码 #

CSS

.carousseltitle {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75vw;
  font-size: 5vw;
  margin-top: 48vw;
  text-align: center;
  /* 用padding和gap替代固定height，灵活控制间距 */
  padding: 1vw 0;
  gap: 1.5vw;
}

.line {
  width: 75vw;
  background: linear-gradient(89deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.70) 53.13%, rgba(255, 255, 255, 0.00) 100%);
  height: 1px;
  border: 0;
}

HTML

<div class="carousseltitle">
  <hr class="line">
  Mon super projet
  <hr class="line">
</div>

关键调整说明 #

• 把id="line"替换为class="line"，遵循HTML id唯一性要求
• 移除固定高度height: 10vw，改用padding控制容器上下留白，gap直接定义线条与标题的垂直间距，可根据视觉需求调整gap的数值（比如改成2vw），确保标题在两条线中间均匀分布

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