设计一种布局方式, 使内层容器box针对外层容器container上下左右居中, 注意: 外层容器和内层容器宽高不固定。
很难受，本来笔者正在居家，然后来了一个公司约面，约到了当天的下午，然后公司招的是React开发，对于React笔者还是挺熟练的就直接同意了，然后面试遇到了这道题，感觉平时见的挺多就分享出来跟大家讨论一下，有其他方法的小伙伴欢迎在评论中谈论嗷。
Step1. 创建出来页面结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">box</div>
</div>
</body>
</html>
Step2. 选择相对定位或者flex布局
相对定位
直接给子盒子上样式，使用position: absolute让盒子脱离文档流，浮动起来。然后设置top: 50%;left: 50%;让子盒子离页面顶部和左边偏离50%，然后使用transform: translate(-50%,-50%)去除掉本身宽高的影响。
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
flex布局
这种方式就是直去操作父盒子的样式就可以了。首先使用display: flex让父盒子变成flex布局，然后通过justify-content: center;align-items: center;设置好flex布局的布局方式。最后最关键的就是使用这种方法，自身是需要有高度的，否则上下居中不会生效，笔者这里选择了相对高对100vh来让父盒子的高度变成跟页面大小一样。实际的开发中这种情况很多，大家视情况而定。
<style>
*{
margin: 0;
padding: 0;
}
.container{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
总结
这两种方式是有明显区别的，相对定位的话就脱离文档流了，页面中是看不到container的实际高度的，当然我们也没设，只是通过这种手段将子盒子的位置设置到了居中的位置。flex定位会撑满父盒子让子盒子出现居中的效果，这里的100vh，在父盒子有实际高度是是可以不写的，因为在我的结构中没有实际的高度，就是让子盒子出现在页面的中间，所以进行了设置。
