使用transform使定位元素居中

1.1水平居中

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

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

使用transform使定位元素居中

 

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

使用transform使定位元素居中

 

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

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

使用transform使定位元素居中

 

1.2垂直居中

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

使用transform使定位元素居中

 

1.3水平垂直居中

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

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

使用transform使定位元素居中

 

需要用translate(x,y)

使用transform使定位元素居中