トランスフォームを使用したCSSのセンタリング

Question

トランスフォームを中心とし、50％の中心が完全に（相対的な親を使用して）50％正しくないのはなぜですか？

実施例：中心ない

span[class^="icon"] { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

例：translateX(-50%)後退に何かが（なぜなら-負の値の） 50％を残したので

span[class^="icon"] { 
    position: absolute; 
    top: 50%; 
    right: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 1

を、その何かを中心にするためにleft: 50%;とペアになっていることを意味します。

right: 50%;を使用する場合は、translateX(50%)を中央に使用してください。

* {margin:0;} 
 
span { 
 
    position: absolute; 
 
    top: 50%; right: 50%; 
 
    transform: translate(50%,-50%); 
 
    background: black; 
 
    color: white; 
 
} 
 

 
body:after, body:before { 
 
    content: ''; 
 
    position: absolute; 
 
    background: red; 
 
} 
 

 
body:after { 
 
    top: 50%; 
 
    left: 0; right: 0; 
 
    height: 1px; 
 
} 
 
body:before { 
 
    left: 50%; 
 
    top: 0; bottom: 0; 
 
    width: 1px; 
 
}

<span>center me</span>