CSS-центрирование с преобразованием

Question

Почему центрирование с преобразованием трансформируется и левое 50% центра отлично (с относительным относительным положением), но не правильно 50%?

Рабочий пример:

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

Пример, который не центр:

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

Answer 1

Поскольку translateX(-50%) движется что-то назад к оставил 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>