61,111
社区成员
发帖
与我相关
我的任务
分享未知宽高的元素水平垂直居中方法
方法一：
思路：使用css3 flex布局
优点：简单 快捷
缺点：兼容不好吧
详情见：http://caniuse.com/#search=flex
方法二：
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性
方法三：
思路：显示设置父元素为：table
子元素为：table-cell，这样就可以使用vertical-align: center，实现水平居中
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持
...全文
请发表友善的回复…
发表回复
槿畔 2019-03-26
- 打赏
- 举报
这就像是什么，你明明是是ie6还想用css兼容动画的感觉。因为css有限，想更好的兼容还是要用js去处理
槿畔 2019-03-26
- 打赏
- 举报
请忽略上面回答的，没有注意标题
風灬雲 2019-03-26
- 打赏
- 举报
margin的话 需要知道元素的宽高哦；未知的话 除非通过js去获取
槿畔 2019-03-26
- 打赏
- 举报
子元素绝对定位，距离顶部 50%，左边50%以后，然后可以使用margin-left为dom元素宽度的一半负值，margin-top也是一样（高度的一半）
baidu_27549073 2019-03-26
- 打赏
- 举报
必须想办法获得宽高
