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

  • 相关阅读:
    内联表值函数FUNCTION
    视图
    公用表表达式(CTE)
    关于TOP (n) WITH TIES的运用
    Python类变量和实例变量(类属性和实例属性)
    方差、协方差、相关系数(转载)
    Fama-French三因子模型
    (转载)什么是阿尔法和贝塔
    Macaca 环境搭建
    UIRecorder + Macaca 自动化测试 Android
  • 原文地址:https://www.cnblogs.com/langee/p/6935496.html
Copyright © 2020-2023  润新知