使用transform使定位元素居中

1.1水平居中

下面举一个例子，父元素里面有一个子元素。

子元素相对于父元素定位时，如果不写left和top，默认定位在父元素的左上角。

 

子元素加上left:50%之后，此时的50%是指父元素宽度的50%，也就是100px，也就是子元素以它自己的左边为基准，平移了100px的距离。

 

因为是以子元素的左边为基准，不算是完全的水平居中，需要再让子元素向左平移一丢丢(子元素宽度一半的距离)。如果前期不知道子元素的宽度，就可以用transform的translate属性了。transform里面的百分比全都是相对于子元素本身来说的，要跟上面left的50%区分开。

transform:translateX(-50%);意思就是，子元素向左平移了一段距离，这个距离是自己宽度的一半。这样就实现了水平居中。

 

1.2垂直居中

垂直居中同理，给子元素加上top:50%，表示，以子元素最上面为基准，平移了100px的距离。然后再用transform平移回来。实现垂直居中。

 

1.3水平垂直居中

水平和垂直方向都需要居中的时候，需要注意。

不能translateX和translateY一起用。会被覆盖。

 

需要用translate(x,y)