一个div在另外一个div中居中显示（水平居中，竖直居中）
方法1：
通过设置子元素绝对定位和margin:auto
.parent {position:relative;width:800px;height:500px;border:2px solid #000;}.child {position: absolute;width:200px;height:200px;margin: auto;top: 0;left: 0;right: 0;bottom: 0;background-color: red;}
方法2：
设置父元素为弹性盒模型display:flex;
然后设置属性justify-content:center; align-items:center;
Q：简单方便，但是 子标签只能存在1个。
.parent {width:800px;height:500px;border:2px solid #000;display:flex;justify-content:center;align-items:center;}.child {width:200px;height:200px;background-color: red;}
方法3：
设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小
问题点：在全屏居中且屏幕大小会改变时有误差
.parent {width:800px;height:500px;border:2px solid #000;position:relative;}.child {width:300px;height:200px;margin:auto;position:absolute;left:50%;top:50%;margin-left: -150px;margin-top:-100px;background-color: red;}
