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

作者：爱喝兽奶帝天荒 | 2024-07-07 00:06:07

踩

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

示例效果

在这里插入图片描述

介绍

（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;
兼容性较好

组件代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/794339