如何实现子元素在父容器中居中，父容器缩小时可滚动至子元素左上角？

这个问题我之前也碰到过！用justify-content: center + align-items: center做居中时，确实会出现这种滚动“死角”——因为flex容器是把元素固定在容器的视觉中心，当容器尺寸小于子元素，溢出部分的滚动范围其实是从中心向外延伸的，自然滚不到子元素的边角。

而你用margin: 0 auto在X轴能正常工作，本质是利用了块级元素在容器中自动分配剩余空间的特性，把左右的空白空间均分了，当元素溢出时，滚动范围是完整覆盖子元素的。要在Y轴也实现同样效果，我们可以把这个思路结合flex来用：

解决方案：Flex + Auto Margins #

只需要修改main和.content的CSS，去掉justify-content和align-items，转而给子元素设置margin: auto：

b { color: white; }
html { position: absolute; width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; }
header { position: absolute; top: 0; height: 84px; width: 100%; background-color: darkolivegreen; }
footer { position: absolute; bottom: 0; height: 56px; width: 100%; background-color: darkslateblue; }
main { 
  position: absolute; 
  top: 84px; 
  bottom: 56px; 
  width: 100%; 
  background-color: #222222; 
  display: flex; 
  /* 去掉原来的居中属性 */
  /* justify-content: center; */
  /* align-items: center; */
  overflow: auto; 
}
div.content { 
  flex-shrink: 0; 
  width: 600px; 
  height: 600px; 
  background-color: darkred; 
  /* 关键：用auto margins实现真正的空间分配式居中 */
  margin: auto; 
}

对应的HTML不需要改动，保持原有结构即可。

为什么这个方法有效？ #

当flex容器设置了overflow: auto，子元素的margin: auto会让它在容器的可用空间里居中——如果容器足够大，元素会完美居中；如果容器小于元素尺寸，margin: auto会自动把margin值设为0，此时元素会从容器的左上角开始布局，溢出部分可以通过滚动完全访问，完美解决了你说的滚动死角问题。

额外：Grid方案 #

如果你更喜欢用Grid，同样的思路也适用，给子元素加margin: auto即可：

main { 
  display: grid;
  /* 不要用place-items: center，否则会出现同样的滚动问题 */
  overflow: auto;
}
div.content {
  margin: auto;
  flex-shrink: 0;
  width: 600px;
  height: 600px;
  background-color: darkred;
}

这样不管是X轴还是Y轴，都能实现你想要的“居中+完整滚动”效果，完全不需要JavaScript。

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