關於 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