CSS 중심 지정 변환

Question

왜 변환 중심으로 배치하고 50 % 중심을 완벽하게 (상대 위치 부모를 사용하여) 50 % 오른쪽으로하지 않습니까?

동작 예 : 중앙하지 않는

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

예 위로 는 (인해 - 마이너스 값) 50 % 좌측에

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

Answer 1

translateX(-50%) 때문에 이동 무언가 어느 어떤 것을 중심으로 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>