怎么让一个元素上下左右居中?
http://www.divcss5.com/wenji/w50230.shtml
(1)
父：{position: relative}
子：{position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
(2)
父：{position: relative}
子：{ position: absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto; }
注意：这种方法子要给个width和height
(3)
父：{position: relative}
子：{ width:400px;height:400px;position: absolute;left: 50%; top:50%;margin-left:-200px;margin-top: -200px; }
(4)display：table
父级元素：{ display:table;}
子级元素： { display:table-cell;vertical-align:middle;text-align: center}
(5)
父：{display:flex;justify-content: center;//子元素水平居中 align-items: center;//子元素垂直居中 }
补充：absolute和relative
https://blog.csdn.net/zhangying1994/article/details/88369661
https://blog.csdn.net/lyn1772671980/article/details/79806561
1.设置了absolute的元素宽度是由内容决定的，relative元素的宽度的则是取决于父元素的宽度
2.如果设置了absolute属性，元素会让出原来的位置，处于另外一个层级。
relative相对定位，相对自己。
absolute绝对定位，相对父元素，用absolute一般父元素都设置有position，相对设置position的最近父元素，如果所有父元素都没有设置position，那么相对根元素(app.vue)
