CSSにおけるpositionのパーセンテージ表現法及び絶対位置中央

位置決めposition:absoluteのボックスが設定され、topを0%に設定すると、ボックスの上部は親要素(位置決め)の上部に隣接し、100%に設定すると、ボックスの上部は親要素の下部に隣接します.計算式:top_percent=サブボックスの上部から親ボックスの上部までの距離/親ボックスの高さ
以下のことが理解できる.

.element {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;/*       */
    margin-top: -50px;/*       */
}

このコードはなぜ親要素におけるサブ要素の絶対中央を実現できるのかが,この方法は要素のサイズを事前に知る必要があり,結合性が強すぎる.
絶対的に中央に位置するより良い方法があります.

.element {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;/*       */
}

また、background-positionのposition値については、top:0%の場合は上記と同じですが、100%の場合は箱の底が親要素の底に隣接しています.計算式:top_percent=サブボックスの上部から親ボックスの上部までの距離/(親ボックスの高さ-サブボックスの高さ)に注意してください.