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%));


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

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

Войти через центр авторизации
Похожие вопросы