TranslateX и перевести Y на тот же элемент? Можно ли применить CC-перевод X и Y на один и тот же элемент? Если я попробую это, translateX переопределяется translateY: .something { transform: translateX(-50%); transform: translateY(-50%); } Ответ 1 Вы можете сделать что-то вроде этого transform:translate(-50%,-50%); Ответ 2 В вашем случае вы можете применять как переводы X, так и Y с помощью свойства translate: transform: translate(tx[, ty]) /* one or two <translation-value> values */ [источник: MDN] для вашего примера, он будет выглядеть следующим образом: .something { transform: translate(-50%,-50%); } DEMO: div{ position:absolute; top:50%; left:50%; width:100px; height:100px; transform: translate(-50%,-50%); background:tomato; } <div></div> Ответ 3 Вы можете комбинировать X и Y в одном выражении: transform: translate(10px, 20px); /* translate X by 10px, y by 20px */ И, в общем, несколько преобразований в одно правило: transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);
Ответ 2 В вашем случае вы можете применять как переводы X, так и Y с помощью свойства translate: transform: translate(tx[, ty]) /* one or two <translation-value> values */ [источник: MDN] для вашего примера, он будет выглядеть следующим образом: .something { transform: translate(-50%,-50%); } DEMO: div{ position:absolute; top:50%; left:50%; width:100px; height:100px; transform: translate(-50%,-50%); background:tomato; } <div></div>
Ответ 3 Вы можете комбинировать X и Y в одном выражении: transform: translate(10px, 20px); /* translate X by 10px, y by 20px */ И, в общем, несколько преобразований в одно правило: transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);