Nikulio
@Nikulio
NaN !== NaN

В чем смысл трюка с позиционированием с помощью position: absolute и transform:translate?

И так, есть такой код:
left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);


Зачем дается трансформ?Если я хочу установить чуть чуть ниже по вертикали я ставлю так:

left: 50%;
		position: absolute;
		top: 60%;
		.transform(translate(-50%, -60%));


или так:
left: 50%;
		position: absolute;
		top: 60%;
		.transform(translate(-50%, -40%));


Спасибо
  • Вопрос задан
  • 588 просмотров
Решения вопроса 1
aliencash
@aliencash
Партизан
Дело в том, что если вы даете блоку позицию, то это позиция его верхнего левого угла, а не центра. Чтобы сместить блок в центр ему дается translate, параметры в процентах при этом вычисляются исходя из размеров самого блока. Т.о. вы получаете возможность центровать блок в окне браузера не зная его абсолютных размеров.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Девять линий Ульяновск
от 45 000 до 80 000 руб.
Krome Photos Челябинск
от 80 000 руб.
20 июн. 2019, в 21:15
1000 руб./в час
20 июн. 2019, в 21:09
30000 руб./за проект
20 июн. 2019, в 20:52
100 руб./за проект