关于 top、left 结合 translate 实现居中的原理探讨

关于 top、left 结合 translate 实现居中的原理探讨

前情提要

• 在居中对齐的方法中常用的一种方法之一，就是使用绝对定位结合 translate、top、left实现居中，探讨原理之前先来看一下实现代码和实现效果：

预览

• 上面的实现效果最主要的代码如下：

.out {
  position: relative;
}
.in {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

解读：由此可见主要是由top、left的百分比和translate百分比实现的，那我们接下来就有必要讲一下两者百分比的原理了：

top、left的百分比的原理

• 从上述的代码和效果中可以看出，居中对齐的实现是依靠了top/left的的百分比来实现的，而且还是正的百分比，下面我们先给出其百分比和位置的公式：

X（内X轴偏移量） = width（外） * left百分比（内）
Y（内Y轴偏移量） = height（外） * top百分比（内）

• 演示：

  预览

translate的百分比的原理

• 从上述的代码和效果中可以看出，居中对齐的实现是还依靠了translate，而且还是负的百分比，下面我们先给出它百分比和位置的公式：

X（内X轴偏移量） = width（内） * translateX百分比（内）
Y（内Y轴偏移量） = height（内） * translateY百分比（内）

• 演示

  预览

总结

从上述的原理解读中可以看出最终的位置的计算公式是：

X（内X轴偏移量） = width（外） left百分比（内） + width（内） translateX百分比（内）
Y（内Y轴偏移量） = height（外） top百分比（内） + height（内） translateY百分比（内）

即：

X（内X轴偏移量） = 300 50% + 100 -50% = 100
Y（内X轴偏移量） = 300 50% + 100 -50% = 100