让绝对定位且居中的div可滚动且不截断首个元素

这个问题我之前踩过坑！你用position: absolute + top: 50% + transform: translate(-50%, -50%)的居中方式，本质是把列表的中心点钉在容器的中心点上。当列表项增多、高度超过容器可视区域时，列表的顶部部分会直接超出容器的上边界——因为容器的滚动范围是自身的可视区域，那些“跑出去”的内容自然就被截断，滚动也看不到。

给你两个最靠谱的现代CSS解决方案，完美解决这个问题：

方案1：用Flexbox实现居中+滚动 #

Flexbox是目前最推荐的布局方式，代码简洁，兼容性拉满，还能自然处理滚动问题。

只需要给容器设置以下样式：

.container {
  /* 如果你需要容器保持相对定位上下文，可以保留这行 */
  position: relative;
  /* 容器的固定宽高，根据你的需求调整 */
  width: 350px;
  height: 450px;
  /* 内容超出时显示滚动条 */
  overflow: auto;
  /* 核心：Flex布局 */
  display: flex;
  flex-direction: column;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
}

然后你的动态列表只需要正常写样式就行，不需要那些absolute和transform：

.dynamic-list {
  /* 列表的宽度，比如占容器的80% */
  width: 80%;
  /* 其他自定义样式：比如边框、内边距等 */
  padding: 1rem;
  border: 1px solid #eee;
}

原理：Flexbox的居中是基于容器的可用空间，当列表高度超过容器时，容器会自动出现滚动条，列表的所有内容都在容器的可视范围内，滚动时不会有任何截断。

方案2：用Grid布局（更简洁） #

如果你喜欢更简洁的代码，Grid布局也是绝佳选择，一行代码搞定居中：

容器样式：

.container {
  position: relative;
  width: 350px;
  height: 450px;
  overflow: auto;
  /* 核心：Grid布局，同时水平+垂直居中 */
  display: grid;
  place-items: center;
}

列表样式和方案1完全一样，不需要额外调整。

如果你非要用Absolute定位（不推荐，但可以解决） #

如果因为某些原因必须保留position: absolute，可以调整定位逻辑，让列表的垂直方向由容器的上下边界约束，而不是基于中心点：

.container {
  position: relative;
  width: 350px;
  height: 450px;
}

.dynamic-list {
  position: absolute;
  /* 让列表的上下边界和容器对齐 */
  top: 0;
  bottom: 0;
  /* 水平居中 */
  left: 50%;
  transform: translateX(-50%);
  /* 列表的宽度 */
  width: 80%;
  /* 列表内容超出时自身滚动 */
  overflow: auto;
}

这种方式是让列表自己滚动，而不是容器滚动，效果和前两种略有不同，但也能避免顶部内容截断。

总结 #

优先选Flexbox或Grid方案，这两种是现代CSS的标准布局方式，不仅解决了居中+滚动的问题，代码也更易维护，兼容性覆盖所有主流浏览器。

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