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

Question

[Nikita Shchypylov]

И так, есть такой код:

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

Спасибо

Answer 1

[Андрей Федоров]

Дело в том, что если вы даете блоку позицию, то это позиция его верхнего левого угла, а не центра. Чтобы сместить блок в центр ему дается translate, параметры в процентах при этом вычисляются исходя из размеров самого блока. Т.о. вы получаете возможность центровать блок в окне браузера не зная его абсолютных размеров.