Почему в Mac не работает абсолютное позиционирование?

Question

[Иван Желудков]

Есть хорошая вёрстка, работает во всех топ браузерах на Windows.
Скидываю заказчику, а у него так: rghost.ru/50754777/image.png
А должно быть идеально выравнено по центру.
В двух браузерах на Mac плохо выглядит, на windows во всех топ браузерах отлично работает.
Выравнивание в большинстве случае сделано:

position: absolute;
margin: auto;
bottom: 0; center: 0; right: 0; left: 0;

Можно отдельный CSS задать для маков?

Answer 1

[pomeo]

Позиционирование по центру не делается тем кодом которым вы показали. У вас это работает из-за чистой случайности, совпал размер окна и размер объектов. Попробуйте в хроме под виндой уменьшить масштаб ctrl+-, сразу всё поймете.

Comments

[Иван Желудков]

Это не случайность. habrahabr.ru/post/189696/. Я всегда так делаю и при загрузке страницы, если не изменять размер CTRL+-, то всё работает идеально во всех браузерах. Не только в последних. Но то, что это неправильное решение, возможно согласен. Но не всё так выравнено. Только центр

[Иван Желудков]

При этом в моём случае, при изменении размера окна всё адаптируется и уменьшается-увеличивается.

[pomeo]

@webvany это всё прекрасно и замечательно, но видите не работает. Вон ниже @Isis привёл то что работает уже лет 10 и нигде не сбоит.

Answer 2

[Кирилл Фирсов]

По центру делается так:
H = высота вашего блока
W - ширина вашего блока
MARGINLEFT = -W/2
MARGINTOP = -H/2

Блоку ставите

position:absolute;
top:50%;
left:50%;
margin-left:MARGINLEFT;
margin-top:MARGINTOP;
width:W;
height:H;

Comments

[Иван Желудков]

действительно, спасибо

[Иван Желудков]

Не помогло, так как у меня ширина измеряется в rem

Answer 3

[Kuzzy]

Чтобы в вашем случае заработало, достаточно задать width и height.
Исчерпывающая статья в тему: coding.smashingmagazine.com/2013/08/09/absolute-ho...

Comments

[Иван Желудков]

Работало, windt и height были заданы, проблема в том, что не работало на маках

Answer 4

[Jonh Doe]

<div class="wrapper">
    <h1>Title</h1>
    <div class="share">share it</div>
</div>

.wrapper {
    height: 300px;
    width: 100%;
    margin: auto;
    text-align:center;
    left: 0; right:0; top:0; bottom:0;
    position: absolute;
}