CSS居中元素时滚动条功能异常，如何实现居中同时完整查看所有内容

问题原因 #

你当前使用的place-content: center Grid布局属性，在子元素#outer尺寸超过父容器#container时，会默认让子元素中心与父容器中心对齐，左上方向的溢出内容会直接落在视口外，且默认滚动逻辑无法访问这部分内容，就会出现文本开头缺失、边框裁切的问题。

解决方法 #

将居中逻辑从父容器配置转移到子元素的自动外边距实现，同时给父容器添加滚动属性即可，修改后的完整代码如下：

CSS代码

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  height: 100%;
  display: grid;
  overflow: auto; /* 新增：父容器开启滚动 */
  /* 移除原来的place-content: center配置 */
}

#outer {
  width: max-content;
  border: 1rem solid black;
  padding: 2rem;
  margin: auto; /* 新增：自动外边距实现居中 */
}

#inner {
  background-color: red;
}

HTML代码（无需修改）

<div id="container">
  <div id="outer">
    <div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
  </div>
</div>

实现效果 #

• 当#outer尺寸小于#container时，元素正常居中显示
• 当#outer尺寸大于#container时，滚动条初始位置在左上角，可通过滚动完整查看所有内容（包括边框）

如果偏好Flex布局，仅需修改#container的配置即可，子元素的margin: auto配置保留：

#container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: auto;
}

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