5.（vue3.x+vite）水平垂直居中实现方式

前端技术社区总目录（订阅之前请先查看该博客）

示例效果

介绍

（1）父级元素设置position:relative；
子级元素设置：position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);
兼容性较好
（1）父级元素设置弹性盒子：display:flex;justify-content:center; align-items:center
IE11不支持
（2）父级元素设置网格元素：display:grid;justify-content:center; align-items:center
IE10不支持
（4）父级元素设置表格元素：display:table-cell;text-align: center;vertical-align: middle
子级元素设置：display: inline-block;
兼容性较好

组件代码