Выравнивание абсолютно позиционированных элементов по центру экрана?

Question

[Джон Голт]

Предположим я хочу набросать свое маленькое модальное окошечко (знаю, что есть миллион плагинов, но суть не в этом), которая пока будет просто открываться. Оно у меня абсолютное. Есть у него высота, скажем 400px и ширина 800px. Как мне теперь его грамотно отцентрировать по центру экрана? Чтобы если окно браузера будет уменьшаться (скажем на 10%, если больше - то буду уменьшать модальное окно ч/з медиа), то уравнение, заданное мною, для расположения модального окна, позволяло сохранять его расположение по центру. Я видел, как парни делают это через проценты и т.д, но буду рад, если кто-то в двух словах объяснит, полагаю, это не долго и не сложно. Заранее спасибо.

Answer 1

[Alex]

Вот:

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

Comments

[Антон Шаманов]

это не центр

[Alex]

Антон Шаманов: Это как раз центр. Проверьте :)

[Антон Шаманов]

Alex: это не центр т.к. расстояние от блока сверху\снизу - слева\справа не одинаковое

[Alex]

Антон Шаманов: вот вам Владислав Турчинский привел наглядный пример.
Вся хитрость в том что transform с - как раз подвигает блок на половину его высоты и ширины

Answer 2

[Антон Шаманов]

у обертки position: relative; у вложения margin: 0 auto;

Comments

[Андрей Чернышев]

Что за чушь вы пишите ? Позиция: прозрачный ?

[Антон Шаманов]

Андрей Чернышев: опечатка, поправил