问题场景：
父盒子高度会变化，可能会比子盒子大，也可能会比子盒子小。
- 比子盒子大的时候，希望子盒子垂直居中；
- 比子盒子小的时候，能够正常滚动；
<body><div class="outer"><div class="inner">12</div></div>
</body>
当子盒子大于父盒子的时候：
css"><style>
.outer {width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;overflow-y: auto;background-color: antiquewhite;
}
.inner {width: 20px;height: 100px;background-color: aqua;
}
</style>
问题：子盒子最上面会有一部分内容显示不出来。
解决：
1 修改 outer 的 align-items
css">.outer {width: 50px;height: 50px;display: flex;align-items: safe center; /* 加上safe */justify-content: center;overflow-y: auto;background-color: antiquewhite;
}
safe与其它对齐值一起使用。如果所选对齐值导致元素溢出容器，则将元素按
start方式对齐。
2 outer 不使用 align-items，inner 使用 margin
css"><style>
.outer {width: 50px;height: 50px;display: flex;/* align-items: center; */justify-content: center;overflow-y: auto;background-color: antiquewhite;
}
.inner {width: 20px;height: 100px;background-color: aqua;margin: auto; /* 添加 margin */
}
</style>
效果：
1 outer 的 height 为 50px
2 outer 的 height 为 120px
