在对元素实现显示位置时，经常会用到定位position或者translate属性。

在当子元素的width和height未知时，可以通过设置translate属性来进行水平垂直居中。

transform：translate(-50%,-50%);

position:absulote;

top:50%;

left:50%;

在translate函数中的百分比的计算是通过该元素的content，padding，border为标准来计算的。

在使用translate或者position都会使元素产生位移，其中的区别在于offsetLeft和offsetTop属性上

POSITION

            position: relative;

            width: 200px;

            height: 200px;

            background-color: red;

            padding: 10px;

            left: 250px;

            top: 100px;

此时offsetLeft和offsetTop值分别为：

offsetLeft :258

test.html:31 offsettop : 108

当定位数值变动时

left: 200px;

top: 100px;

此时offsetLeft和offsetTop值分别为：

offsetLeft :208

test.html:31 offsettop : 108

TRANSLATE

使用 translate 的offsetTop和 offsetLeft 与没有产生位移的元素没有区别，这offsetTop和 offsetLeft 的值都是固定不变的。

transform: translate(250px,100px);

offsetLeft :8

test.html:29 offsettop : 8

transform: translate(200px, 100px);

offsetLeft :8

test.html:29 offsettop : 8