css 布局居中，且需要滚动时，子元素被遮盖

【我想要的效果】子元素在父元素中可以缩放，小于父元素时居中，如果宽高大于父元素，则父元素滚动；

居中

居中布局

<div class="parent">
  <div class="child">
    <!-- grandChild是为了更清楚测试child元素被遮盖 -->
    <div class="grandChild">im a coconut</div>
  </div>
</div>

绝对定位 margin:auto

  用这个方法，水平方向可以做到预期的效果，在子元素大于父元素时，margin-left:0。但是在垂直方向上，子元素的上部分会被遮盖，看不到im a coconut这个节点了。
  滚动条滚动到最顶点，可以看到child这一部分往上走了margin-top:-59.2，垂直方向的 margin 没有像水平方向一样做处理，导致上面部分内容被遮盖。

/* 设置border也是为了更清楚测试child元素被遮盖 */

/* 绝对定位 margin:auto*/
/* 条件：父子都是块级元素，子有宽高 */
/* 缺点：如果子元素大于父元素，会被覆盖 */
.parent {
  margin: 200px;
  width: 500px;
  height: 500px;
  background-color: #ebc1a8;
  position: relative;
  overflow: auto;
}

.child {
  width: 600px;
  height: 600px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #009ace;
  border: 3px solid #ff3eb5;
}

绝对定位 transform

  滚动到最顶点，我们可以看到child的中心点在parent的中心点，child居中显示。但是左侧和上侧的部分被遮盖。

/* 绝对定位 transform */
/* 缺点：如果子元素大于父元素，会被覆盖 */
.parent {
  margin: 200px;
  width: 500px;
  height: 500px;
  background-color: #ebc1a8;
  position: relative;
  overflow: auto;
}
.child {
  width: 600px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #009ace;
  border: 3px solid #ff3eb5;
}

flex 布局

  flex 布局会将child的宽度强行设置为自身的宽度，可以由计算样式证明得出，高度是自身设置的高度。但是上方会因为align-items垂直居中，而被遮盖。

/* flex布局 */
/* 缺点：如果子元素大于父元素，会被覆盖 */
.parent {
  width: 500px;
  height: 500px;
  background-color: #ebc1a8;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}

.child {
  width: 600px;
  height: 600px;
  background-color: #009ace;
  border: 3px solid #ff3eb5;
}

table-cell

  子元素直接把父元素撑开了。parent宽高 500*500，计算样式显示是 600*600

/* table-cell */
/* 缺点：子元素比父元素大的时候，会撑开父元素 */
.parent {
  width: 500px;
  height: 500px;
  background-color: #ebc1a8;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  overflow: auto;
}

.child {
  width: 600px;
  height: 600px;
  display: inline-block;
  background-color: #009ace;
  border: 3px solid #ff3eb5;
}

grid 布局

  完美解决问题

/* grid布局 */
/* 解决：解决了子元素比父元素大的时候，会被覆盖的问题 */
.parent {
  width: 500px;
  height: 500px;
  background-color: #ebc1a8;
  overflow: auto;
  display: grid;
  place-items: center;
}

.child {
  width: 600px;
  height: 600px;
  background-color: #009ace;
  border: 3px solid #ff3eb5;
}

缩放

刚开始我是想着用transform:scale来整体缩放，但是我发现当缩放到子元素大于父元素时，子元素还是会被遮盖。因为此时的 style 是原来没缩放的宽高，布局中默认他的宽高就是那么多，但视觉上宽高已经被放大了，因此被遮盖。

最后解决方案是，算出 scale 后，重新设置子元素的宽高 width = originWidth * scale。

transform

假设初始化 child 400*400；缩放 1.5 倍
效果与绝对定位-transform相似

.child {
  width: 400px;
  height: 400px;
  transform: scale(1.5);
  background-color: #009ace;
  border: 3px solid #ff3eb5;
}

重新计算

直接设置宽高 400*scale
效果与grid 布局相似

$scale: 1.5;
.child {
  width: 400px * 1.5;
  height: 400px * 1.5;
  background-color: #009ace;
  border: 3px solid #ff3eb5;
}

https://39.108.101.36/2023/12/26/css_center/index.html