超出视口高度时，垂直居中对齐的Div表现异常问题

我懂你碰到的这个坑——用top: 50%; transform: translateY(-50%);实现垂直居中时，内容少的时候看起来完美，一旦内容多到超出容器高度，要么顶部内容被截断，要么滚动条根本没法正常工作对吧？这是因为transform定位的元素本质上是脱离了容器的正常布局流，容器没法正确感知内部内容的实际高度，自然就没法处理滚动逻辑了。

给你两个靠谱的解决方案，都不需要依赖媒体查询，完全适配内容长度变化：

方案一：Flexbox布局（推荐，简洁高效） #

Flexbox天生就支持垂直居中，而且能完美处理内容溢出的情况，代码改动也很小：

修改后的CSS代码： #

body {
  margin: 0;
  height: 100vh;
  /* 让body成为垂直方向的flex容器 */
  display: flex;
  flex-direction: column;
}

header {
  height: 60px;
  background: #eee;
}

.content {
  /* 让内容区占满剩余的屏幕高度 */
  flex: 1;
  /* 内容超出时显示垂直滚动条 */
  overflow-y: auto;
  /* 实现内部元素垂直居中 */
  display: flex;
  align-items: center;
  /* 可选：同时实现水平居中 */
  justify-content: center;
  /* 加内边距避免内容贴紧容器边缘 */
  padding: 2rem;
}

.inner {
  /* 可选：限制内容最大宽度，避免太宽影响阅读 */
  max-width: 800px;
  width: 100%;
}

为什么这个方案有效？ #

• Flex布局让content容器自动填充头部以外的剩余空间，同时能正确识别内部inner元素的实际高度。
• 当inner内容超出content高度时，overflow-y: auto会自动触发滚动，而且垂直居中的逻辑在内容未溢出时依然生效。

方案二：Table-Cell布局（兼容旧浏览器备选） #

如果需要兼容一些不支持Flexbox的旧浏览器（比如IE9及以下），可以用表格布局来实现：

修改后的CSS代码： #

body {
  margin: 0;
  height: 100vh;
  display: table;
  width: 100%;
}

header {
  display: table-row;
  height: 60px;
  background: #eee;
}

.content {
  display: table-cell;
  /* 垂直居中 */
  vertical-align: middle;
  height: 100%;
  overflow-y: auto;
  padding: 2rem;
}

.inner {
  max-width: 800px;
  /* 水平居中 */
  margin: 0 auto;
}

核心原理： #

表格布局的table-cell元素会自动根据内容调整，vertical-align: middle能实现垂直居中，同时overflow-y: auto在内容溢出时触发滚动，和Flexbox的效果一致，只是写法稍显繁琐。

为什么原来的transform方法会失效？ #

当你用top: 50%; transform: translateY(-50%);时，inner元素是相对于content容器进行偏移定位的，它的实际高度并没有被content容器纳入计算范围。当内容超出content高度时，inner的顶部会被往上偏移50%的容器高度，导致顶部内容被截断，而且content容器因为没感知到inner的真实高度，滚动条也无法正常工作。

这两个方案都能完美解决你的问题，根据你的浏览器兼容需求选一个就行～

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