HTML页面垂直居中全屏线条自适应布局问题解决方案咨询

这个问题我之前也碰到过——固定数量的线条在窗口缩小时要么挤成一团要么溢出，确实头疼。其实核心思路是让线条数量/布局自适应容器高度，而不是硬写固定个数，下面给你两个实用方案：

方案一：用CSS背景实现（最简单，无DOM元素） #

如果不需要给线条加交互，直接用线性渐变背景就能完美解决，完全不用操心数量问题：

body {
  margin: 0;
  min-height: 100vh;
  /* 让整个背景垂直居中 */
  display: flex;
  align-items: center;
  /* 定义水平线条的渐变：1px黑色线条，接着19px透明间距，总高度20px */
  background-image: linear-gradient(to bottom, #000 1px, transparent 1px);
  /* 控制线条间距，这里设置为20px（线条1px + 间距19px） */
  background-size: 100% 20px;
  /* 让背景从页面垂直中心开始重复 */
  background-position: center center;
  /* 只在垂直方向重复线条 */
  background-repeat: repeat-y;
  /* 可选：高度不够时隐藏溢出，或者换成overflow-y: auto允许滚动 */
  overflow: hidden;
}

这个方法的好处是：不管窗口怎么缩放，线条都会自动以设定的间距从中心向上下重复，永远不会出现布局错乱，代码也极简。

方案二：用CSS Grid + JS动态生成（支持交互） #

如果需要给线条加点击、hover这类交互，就得用实际的DOM元素。我们可以用Grid布局配合JS动态计算线条数量：

HTML #

<div class="line-container"></div>

CSS #

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 高度不足时允许垂直滚动 */
  overflow-y: auto;
}

.line-container {
  width: 100%;
  max-height: 90vh; /* 给上下留一点边距 */
  display: grid;
  /* 每行高度设为20px（和线条间距对应） */
  grid-template-rows: repeat(auto-fill, 20px);
  /* 让Grid内容垂直居中 */
  align-content: center;
}

.line {
  height: 1px;
  background-color: #000;
  width: 100%;
  /* 让线条在每行垂直居中 */
  align-self: center;
}

JS #

const container = document.querySelector('.line-container');
const lineSpacing = 20; // 和CSS里的grid-template-rows保持一致

// 计算并生成线条的函数
function renderLines() {
  const containerHeight = container.clientHeight;
  // 计算能容纳的线条数量
  const lineCount = Math.floor(containerHeight / lineSpacing);
  
  // 清空现有线条
  container.innerHTML = '';
  
  // 生成线条元素
  for (let i = 0; i < lineCount; i++) {
    const line = document.createElement('div');
    line.classList.add('line');
    container.appendChild(line);
  }
}

// 初始化渲染
renderLines();
// 窗口大小变化时重新计算
window.addEventListener('resize', renderLines);

这个方案会根据容器高度自动计算能放多少条线条，窗口缩放时实时更新，保证线条始终垂直居中且不会溢出。

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