(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轴上下拉动

另外两种参数写法:

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

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

，天才就是这样，终身努力，便是天才。