首页 > 代码库 > 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
1.绝对定位居中(Absolute Centering)技术
我们经常用margin:0 auto;来实现水平居中,而一直认为margin:auto;不能实现垂直居中......实际上,实现垂直居中仅需要声明元素高度和下面的CSS:
.Absolute-Center { margin : auto ; position : absolute ; left : 0 ; right : 0 ; top : 0; bottom: 0; }
优点:
1.支持跨浏览器,包括IE8-IE10;
2.无需其他特殊标记,CSS代码量少;
3.支持百分比%属性值和min-/max属性;
4.只用这一个类可实现任何内容块居中;
5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下);
6.内容块可以被重绘;
7.完美支持图片居中。
缺点:
1.必须声明高度(查看可变高度 Variable Height);
2.简易设置overflow:auto;来防止内容月结溢出。(查看溢出Overflow)
3.在Windows Phone设备上不起作用
浏览器兼容性:
Chrome,Firefox,Safari,Mobile Safari,IE8-IE10,
绝对定位方法在最新版Chrome,Firefox,Safari,Mobile Safari,IE8-IE10上均测试通过。
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。