(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-065.(vue3.x+vite)水平垂直居中实现方式
- 07-06CSS实现水平垂直居中
- 07-06web前端入门到实战:CSS不定宽高的垂直水平居中,9 种方式总汇
- 07-06img标签在div中水平垂直居中--两种实现方式
- 07-06如何让一个div垂直水平居中,分别用css和css3的多种方法实现
- 07-06当div有边框图片的时候,怎么实现内部的p标签的水平和垂直居中
- 07-060060 translate、margin 实现绝对定位的盒子 水平居中、垂直居中
- 07-06两种以上方式实现已知或者未知宽度的垂直水平居中
- 07-06css3的box方法实现水平垂直居中
- 07-06div实现水平垂直居中