多个div怎么居中？

2022-03-26 10:19| 来源: 网络整理| 查看: 265

多个div怎么居中？可愁死人了

一、absolute+transformweb

(1) 情境：两个div时 (2)解决父元素保证position：relative 子元素保证{ position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } （3）代码svg

.parent{ position:relative; } .child{ position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); }

（4）优缺优势：绝对定位脱离文档流，不会对后续元素的布局形成影响缺点：transform 是 CSS3 属性，存在兼容性问题布局

**二、inline-block + text-align ** （1）情境：多个div嵌套时（2）优势：兼容性好（3）代码code

.parent{ text-align: center; } .child{ display: inline-block; }

**三、table+margin （1）优势：不用设置父元素样式，只支持IE8及其以上版本orm

.child{ display:table; margin:0 auto; } 居中

【本文地址】

今日新闻