乐趣区

关于css:使用-transform-使大小未知的元素居中

1. 程度居中

  • 上面举一个例子,父元素外面有一个子元素
  • 子元素绝对于父元素定位时,如果不写 left 和 top,默认定位在父元素的左上角

  • 子元素加上 left:50% 之后,此时的 50% 是指父元素宽度的 50%,也就是 100px,也就是子元素以它本人的右边为基准,平移了 100px 的间隔

  • 因为是以子元素的右边为基准,不算是齐全的程度居中,须要再让子元素向左平移一丢丢 (子元素宽度一半的间隔)
  • 如果后期不晓得子元素的宽度,就能够用 transform 的 translate 属性了
  • transform 外面的百分比全都是绝对于子元素自身来说的,要跟下面 left 的 50% 辨别开
  • transform:translateX(-50%); 意思就是,子元素向左平移了一段距离,这个间隔是本人宽度的一半
  • 上述操作相当于,子元素先向右挪动了父元素的一半,又向左挪动了本人的一半,实现了程度居中

2. 垂直居中

  • 垂直居中同理,给子元素加上 top:50%,示意,以子元素最下面为基准,平移了 100px 的间隔
  • 而后再用 transform 平移回来,实现垂直居中

3. 程度垂直居中

  • 程度和垂直方向都须要居中的时候,须要留神,不能 translateX 和 translateY 一起用。会被笼罩

  • 须要用 translate(x,y) 属性,即 translate(-50%,-50%)
退出移动版