高度未知的盒模型垂直居中显示

今天在做一个功能的时候，遇到了这样一个问题

用户在进入这个页面的时候，先弹出一个遮罩层，遮罩层里面的弹窗居中显示，水平居中通过margin:0 auto;就可实现，垂直居中在写的时候，意识到这个弹窗盒子的高度不应该写死，应该根据留言的内容多少进行高度伸缩，这种情况适用于父级元素高度确定，子级元素高度未知，对子级元素进行垂直居中的情况
父级设置宽高100% 子级设置：position: relative; top: 50%; transform: translateY(-50%);即可实现
父级盒模型

子级盒模型