使用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)