CSS translate — зсув елемента без transform

CSS властивість translate зсуває елемент окремою властивістю, без transform.

правити

Загальний опис

Значення читаються як X, Y і за потреби Z: translate: 50% 10px.

Важлива особливість: відсотки тут рахуються від розміру самого елемента, а не контейнера. Саме на цьому побудований класичний прийом центрування: left: 50%; translate: -50%.

правити

Порада

Для анімації руху бери translate, а не left/top: браузер робить це на графічному прискорювачі й не перераховує макет.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

translate: none | <length-percentage>{1,2} <length>?;

Властивість translate може отримувати 2 значень:

none

Без зсуву.

автор: NagarD

правити

length percentage

Зсув по X, за потреби Y і Z: translate: 50% 10px;

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
translate	104+	72+	14.1+	90+	104+	-

Підтримка: мобільні переглядачі

Переглядач
translate	104+	yes	yes	14.5+

Приклади

+ запропонувати свій приклад у пісочниці

<div class="wrap">
    <div class="center">По центру</div>
</div>

.wrap {
    position: relative;
    height: 200px;
    background: #f4f4f4;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    /* -50% від власного розміру елемента */
    translate: -50% -50%;
}