1366x768分辨率下网站头部被截断问题排查求助

首先，你的猜测方向是对的，这个头部截断的问题确实和你用translate(-50%,-50%)实现的居中方式直接相关。

咱们来拆解一下当前代码的问题：

• 你的.inner容器设置了固定高度890px，而1366x768显示器的可用高度只有768px，容器本身高度已经超过了屏幕高度。
• 当你用position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);时，这个居中逻辑是把容器的中心点定位到屏幕中心点，然后向上下左右各偏移自身尺寸的50%。
• 对于高度来说，容器会向上偏移890px/2 = 445px，但屏幕顶部到中心点的距离只有768px/2 = 384px，这样容器顶部就会超出屏幕顶部445-384=61px，自然就会出现头部被截断的情况。

另外，Screenfly测试略有改善可能是因为工具的模拟环境和实际浏览器的窗口计算（比如包含了浏览器标题栏、工具栏高度）略有差异，但本质问题还是容器固定高度超过屏幕可用高度导致的。

解决办法 #

你可以根据需求选择以下几种方案：

方案1：去掉固定高度，让容器自适应内容 #

如果不需要固定容器高度，直接移除.inner的height: 890px，让容器高度由内部内容决定，这样即使在小屏幕上，容器也不会超出屏幕太多，居中后头部也不会被截断：

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 1301px;
  /* 移除固定高度 */
}

方案2：改用弹性盒居中（推荐） #

既然你的.cn已经用了display: flex，可以直接利用弹性盒的居中能力，完全不用绝对定位和translate，这样能避免固定尺寸导致的溢出问题：

.cn {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 给父容器设置最小高度，确保占满屏幕高度 */
  min-height: 100vh;
  /* 去掉默认边距，避免不必要的滚动条 */
  margin: 0;
}
.inner {
  width: 1301px;
  height: 890px;
  /* 移除绝对定位和translate相关属性 */
}

这种方式下，当容器高度超过屏幕高度时，浏览器会自动出现垂直滚动条，用户可以滚动查看完整内容，不会出现截断。

方案3：限制容器最大高度，超出部分滚动 #

如果必须保留固定高度，可以给.inner设置最大高度和溢出滚动：

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 1301px;
  height: 890px;
  /* 限制最大高度为屏幕可用高度的90%（留一点边距） */
  max-height: 90vh;
  /* 超出部分垂直滚动 */
  overflow-y: auto;
}

这样容器不会完全超出屏幕，头部会显示完整，超出的内容可以滚动查看。

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