父div占满视口高度时如何垂直居中指定子元素 可使用vh/vw实现

以下两种方案均满足「父div占满视口、header固定顶部、text-wrapper自适应高度且始终垂直居中」的需求，全程使用vh单位实现适配：

方案1：header占据文档流（更稳定，无重叠风险） #

不需要将header设置为absolute定位，逻辑如下：

• 父容器#zero设置height: 100vh占满整个视口，采用纵向flex布局
• header设置flex-shrink: 0避免被布局压缩，自然固定在顶部
• text-wrapper不需要设置固定高度，通过transform实现自适应居中，top: 50%基于父容器剩余空间定位，translate的百分比基于自身高度计算，自动修正偏移

对应的CSS代码示例：

#zero {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#header {
  flex-shrink: 0;
  /* 可自定义header的样式，高度、padding任意调整都不影响居中效果 */
  padding: 12px 20px;
  background: #f5f5f5;
}

#text-wrapper {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

方案2：保留header为absolute的原有逻辑 #

如果需要继续使用absolute定位的header，适配方案如下：

• 父容器#zero设置height: 100vh; position: relative作为定位上下文
• header保留position: absolute; top: 0的设置固定在顶部
• text-wrapper通过vh动态计算偏移，不需要提前知道自身高度即可居中

对应的CSS代码示例：

#zero {
  height: 100vh;
  position: relative;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 可自定义header的样式 */
  padding: 12px 20px;
  background: #f5f5f5;
}

#text-wrapper {
  /* 将元素顶部移动到视口垂直中线位置 */
  margin-top: 50vh;
  /* 向上偏移自身高度的50%，实现完全垂直居中 */
  transform: translateY(-50%);
  /* 如果header高度过高导致和text-wrapper重叠，额外加一行padding-top等于header高度即可 */
}

两种方案都适配所有屏幕尺寸，text-wrapper内容增减、高度变化时都能自动保持居中效果。

内容的提问来源于stack exchange，提问作者U. Watt