分析

1. 假定我们当前页面的中心可视宽度为1000 两边有padding-left:60 padding-right:60的宽度。
   
2. 当前有四层盒子 box1 box2 box3 三组盒子父子或祖孙关系。(此时的box1 至 box3 之间可能有n个盒子 需要给他们加auto_midle_Box class)
   

// 自适应普通盒子
.auto_midle_Box{
  width: 100%;
  box-sizing: border-box;
}

1.我们需要给最大的盒子box1 添加auto_Person_Box class

// 自适应 父盒子
.auto_Person_Box{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 0;
} 

2. 需要给box2加 auto_Fixed_Box class

// 自适应固定盒子
.auto_Fixed_Box{
  padding-left: calc(60px + env(safe-area-inset-left));
  padding-right: calc(60px + env(safe-area-inset-right));
  width: 1000px;
  max-width: 100%;
  box-sizing: border-box;
}

3. 需要给box3 加 auto_MinPerson_Box class

// 自适应最小父盒子
.auto_MinPerson_Box{
  width: 100%;
  min-width: 500px;
  box-sizing: border-box;
}

总结：

1.当浏览器宽度 大于1000px box就可以一直垂直居中，固定在浏览器中。
2.当页面的宽度 变小 但 大于 1000px时，可是区域（1000px）两边的留白会慢慢变小，可是区域宽度不变。
3.当页面小于1000px时，box宽度会变小，但是两边padding-left 与padding-right不变，中间内容会变小，内容会相互挤动，当父盒子宽度 小于 500+60+60=620px 时，子盒子宽度不变 页面再缩小 可视内容就会隐藏。