网页元素居中攻略记_(5)未知宽高元素绝对居中

题外话

以前,我们要自适应全局居中,需要借助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轴;

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