transform:translate(-50%,-50%)实现水平垂直居中

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置

 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

 

实例：

如上图所示，想让这个地图的图片处于整个页面的中心位置，则可以使用绝对定位，加上top，left，translate属性进行设置。

              .map1 {
                    width: 6.475rem;
                    height: 6.475rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: url(../images/map.png);
                    opacity: 0.3;
                }

 

 

最终地球的图片就处在页面的中心位置了。