どのようにトップと翻訳は一緒にdivを中心に動作します

私は長い間、絶対配置されたdivを集中させることは書く必要があります.

top: 50%;
left: 50%;
translate(-50%, -50%);

しかし、今週まで、私はそれがどのように働くかについて、決して考慮しませんでした.私は事故で発見し、それはとても明白な一度知っている.それはちょうどその割合は、物事を混乱させると明らかではないときに知らない.

絶対配置型

あなたが絶対にdivを位置するならばposition: absolute; それから、それはその最も近い比較的配置された親に対して配置される.その位置は左上になります.はtop: 0; and left: 0; .
あなたがそれからそれを動かしたいならばtop: 10px; 10 pxでそれを下に移動します.And top: -10px; 10 pxでそれを移動します.

50 %でdivを動かすこと

top: 50%; それは正の数だから、それを移動します.そして、50 %は、比較的配置された親のサイズを指します.親は200 px背が高いとしましょう.50 % = 100 px.それで、それは100 pxで下ってdivを動かしています.

なぜ集中していないのか？

論理的に、半分の親の高さによってdivを下に動かすことは垂直にそれを中心にするでしょう.しかし、そうではありません.それは少しあまりに遠いです.答えは、それが始まった位置にあります.
それは上から始まった.それは私がdivの上部が親の上にあったことを意味する.しかし、我々はそれを移動する多くの、それは部門のトップに基づいてそれを配置します.
So top: 50%; その親の下の道の50 %の位置のdivの位置.

どうやって変換するのか

我々は、垂直方向にDIVを知っているtransform: translateY(-50%); 作品でもどうやって?
答えは50 %の割合です.
親のパーセンテージであるtopとは異なり、翻訳はdiv自体のパーセンテージです.その50 %は、それ自体の半分の高さでそれを動かしています.divが50 pxの高さであると言います、50 %は25 pxをそれを動かします.
覚えてtop: 50%; divの最上部を親の下に置くか?我々がそれについて考えるならば、我々が垂直にセンターにしたいことは半分の高さによってそれを動かすことになっています.
これはまさにtransform: translateY(-50%); を行う.
これらのパーセンテージが何パーセントであるかについて理解するならば、それは明白です.そして、より簡単に見るには、背の高いあなたの絶対位置divです.

どのような水平中心について？

それはまったく同じだ.divは起動します.left: 0; : divの左端は親の上で0 pxの範囲にある.left: 50%; その左端が道の50 %であるように、それを動かしてください.transform: translateX(-50%); その幅の50 %を返します.

常に何の割合ですか

これはCSSと同様に人生でも真実です.