题外话

以前,我们要自适应全局居中,需要借助JS或者JQ来实现,现在有了CSS3就可以省去好多功夫了,为什么这么说!!

请看比较:

传统的绝对居中

    #container{
        position:abosolute;
        top:50%;
        left:50%;
        margin-left:-包含块宽度的一半(如 -300px );
        margin-top: -包含块高度的一半;
    }

这种是实现了包含块的绝对居中,但是有一个问题,就是宽高度无法自适应(需固定宽高)…比如动态增加数据的时候,用这个就不大合适了….这时候折中的办法就是借助JS或者JQ来解决

新型的绝对居中

(需要较新浏览器,用了一个CSS3的属性)

属性的名字:transform:translate(支持IE9+,其他浏览器基本都支持了);

    #container{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

下面我们来分析这句话transform: translate(-50%, -50%);;

意思就是说,拉回调用该属性的元素的一半宽高;

transform:translate有三种写法,我写的那种包含X,Y的,第一个参数是针对X轴左右拉动,第二个是针对Y轴上下拉动

另外两种参数写法:

1. transform:translateX(-50%),只针对X轴;
2. transform:translateX(-50%),只针对Y轴;

使用了该属性后,就可以实现未知宽高自适应绝对居中了!!!是不是很赞!!!

版权声明：本文为博主原创文章，未经博主允许不得转载。