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

示例效果

5.(vue3.x+vite)水平垂直居中实现方式-LMLPHP

介绍

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

组件代码

07-03 08:14