Welcome, Old Sport!

transform: translate实现垂直水平居中定位

by ilikecss ON 2017/09/21 230

我们在使用一些popup窗口时候经常遇到的问题,如何才能使窗口水平垂直居中弹出,比较简单老式的方法就是用css去调节位置。步入css3时代后我们可以通过新的属性来实现该效果,方便简单。

transform:translate()

变动,位移;

CSS


    top:50%;
    left:50%;
   -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%, -50%);

浏览器支持表:

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ ALL 11+ 4.4+ none

IE11以下会转换为2D Transforms;无论是3d或是2d转换,坐标原点都是在转换元素的左上角,向右为X轴正方形,向下为Y轴正方形。然后有个transform-origin属性,其默认值是(50%,50%,0)。

目前还没有评论



TOP