Как спозиционировать блок по центру правильно?

Question

[Александр]

Есть блок (popup), который сверстан и спозиционирован по центру по такому принципу:

<div class="popup">Контент</div>

.popup
{
width: 400px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Но на маках transform: translate не работает как надо. Как решить?

Answer 1

[Никита Баев]

Не на маках, а, видимо, в Safari.
До 9 версии transform работал с префиксом -webkit

Answer 2

[Сергей Карвасарный]

.popup
{
width: 400px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

если хочешь так сделать не забывай отнимать половину блока, нужно дописать margin-left: -200px тогда будет точно по центру, если просто left: 50% то не по центру блок станет. Левый край блока поставит по центру просто.

Answer 3

[Александр Гончаров]

Не забывайте, что у родителя нужно прописать position: relative; и только после этого у дочернего селектора писать position: absolute;, не знаю при чем здесь position: fixed;.

Что же касается префиксов, префикс -webkit- нужен не только для Safari 8-, но и для Андроидного браузера. Поддержку браузеров смотри здесь.

Comments

[Александр]

fixed для фиксации блока при прокрутке, не?

[Александр Гончаров]

Palehin: ну то есть я отлично знаю для чего он используется. Но автор вопроса не написал же какой блок относительно какого нужно отцентровать, поэтому я предложил более generic решение.

[Александр]

Александр Гончаров: Автор вопроса я. Блок позиционируется относительно body

[Александр Гончаров]

Palehin: тогда базару не имею. =) Только про префиксы мой ответ можно читать.