langee

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上均测试通过。

 

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-11-30
  • 2021-08-31
  • 2021-11-30
  • 2021-11-30
  • 2021-12-31
  • 2021-11-30
  • 2021-09-28
猜你喜欢
  • 2021-11-30
  • 2021-11-30
相关资源
相似解决方案