このCSSコードは、要素を中心にどのように動作するのですか？

Question

position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%) 

これは、ビューポート内のボタンをセンタリングするためのCSSコードです。誰かがこの仕組みを説明することはできますか？私はそれをオンラインのどこかに見つけましたが、うまくいくように見えますが、私はマージンの権利と変換を必要としません。当然のことながら、コードはそれらがなければ機能しませんが、直感的に私は最初の3つが要素を中心にするのに十分であるべきだと感じます。私はCSSには比較的新しいので、これが愚かな質問と考えられるかどうか分かります:)

Answer 1

この記事を見てください：https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ css（position、top、およびleft）の最初の3行を使用するだけで、オブジェクトの左上隅が中央になり、オブジェクト全体が完全に中央から外れます。負の平行移動は、オブジェクトをその高さおよび幅の半分ずつ上方向および右方向に移動させ、オブジェクトを中央に配置します。実際には、私はマージン右のコードが必要ではないと思っていますが、私は間違っているかもしれません。