如何相对于浏览器屏幕垂直对齐父div中的子div？

根据你提供的示意图，需求是让父div中的子div相对于浏览器屏幕实现垂直对齐，以下是几种可行的实现方法：

CSS 实现方案（推荐） #

CSS方案无需额外脚本，性能更优，是首选方式。

方法1：Flexbox 布局 #

这种方式代码简洁，兼容性好（支持IE10及以上），可同时实现水平+垂直居中：

/* 父容器样式：确保高度覆盖浏览器视口 */
.parent {
  position: relative;
  min-height: 100vh;
  display: flex;
  /* 垂直居中 */
  justify-content: center;
  align-items: center;
}

/* 子元素样式，可自定义 */
.child {
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
}

如果仅需要垂直对齐，水平保持子元素原有位置，可修改父容器的justify-content为默认值，或直接设置子元素的水平margin：

.parent {
  justify-content: flex-start; /* 水平左对齐 */
}
.child {
  margin-left: 20px; /* 自定义水平位置 */
}

方法2：绝对定位 + Transform #

适合父容器无法使用Flex/Grid布局的场景，子元素会基于视口垂直居中：

.parent {
  position: relative;
  min-height: 100vh; /* 父容器高度覆盖视口 */
}

.child {
  position: absolute;
  top: 50%;
  /* 向上偏移自身高度的一半，实现垂直居中 */
  transform: translateY(-50%);
  /* 可选：水平居中 */
  left: 50%;
  transform: translate(-50%, -50%);
}

方法3：Grid 布局 #

语法更简洁，现代浏览器支持良好：

.parent {
  min-height: 100vh;
  display: grid;
  /* 同时实现水平+垂直居中 */
  place-items: center;
}

.child {
  /* 子元素自定义样式 */
}

JavaScript 实现方案 #

如果需要兼容极低版本浏览器，或需动态计算位置，可使用JS实现：

function setVerticalCenter() {
  const parent = document.querySelector('.parent');
  const child = document.querySelector('.child');
  
  // 获取浏览器视口高度
  const viewportHeight = window.innerHeight;
  // 获取子元素的实际高度
  const childHeight = child.offsetHeight;
  
  // 计算垂直居中的top值
  const top = (viewportHeight - childHeight) / 2;
  
  // 设置子元素位置
  child.style.position = 'absolute';
  child.style.top = `${top}px`;
  // 可选：设置水平居中
  // child.style.left = '50%';
  // child.style.marginLeft = `-${child.offsetWidth / 2}px`;
}

// 页面加载完成后执行
window.addEventListener('load', setVerticalCenter);
// 窗口大小改变时重新计算位置
window.addEventListener('resize', setVerticalCenter);

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