使用 transform 使大小未知的元素居中

1.水平居中

  • 下面举一个例子,父元素里面有一个子元素
  • 子元素相对于父元素定位时,如果不写 left 和 top ,默认定位在父元素的左上角
使用 transform 使大小未知的元素居中
文章图片

  • 子元素加上 left:50% 之后,此时的 50% 是指父元素宽度的 50%,也就是 100px,也就是子元素以它自己的左边为基准,平移了 100px 的距离
使用 transform 使大小未知的元素居中
文章图片

  • 因为是以子元素的左边为基准,不算是完全的水平居中,需要再让子元素向左平移一丢丢(子元素宽度一半的距离)
  • 如果前期不知道子元素的宽度,就可以用 transform 的 translate 属性了
  • transform 里面的百分比全都是相对于子元素本身来说的,要跟上面 left 的 50% 区分开
  • transform:translateX(-50%); 意思就是,子元素向左平移了一段距离,这个距离是自己宽度的一半
  • 上述操作相当于,子元素先向右移动了父元素的一半,又向左移动了自己的一半,实现了水平居中
使用 transform 使大小未知的元素居中
文章图片

2.垂直居中
  • 垂直居中同理,给子元素加上 top:50%,表示,以子元素最上面为基准,平移了 100px 的距离
  • 然后再用transform平移回来,实现垂直居中
使用 transform 使大小未知的元素居中
文章图片

3.水平垂直居中
  • 水平和垂直方向都需要居中的时候,需要注意,不能 translateX 和 translateY 一起用。会被覆盖
【使用 transform 使大小未知的元素居中】使用 transform 使大小未知的元素居中
文章图片

  • 需要用 translate(x,y) 属性,即 translate(-50%,-50%)

    推荐阅读