Четыре блока в центре экрана

[PavelTkachev]

Безуспешно пытаюсь позиционировать четыре прямоугольных блока по центру экрана.

 

http://jsfiddle.net/e4PYz/

 

Задача в том, чтобы они размещались всегда в центре в не зависимости от размера окна. И если им есть место, то увеличивались до максимального размера, а если не хватает места, то сжимались.

 

Как этого добиться?

 

И существует ли возможность контролировать расстояние между красными прямоугольниками?

[npofopr]

Таблицы вам в помощь

[PavelTkachev]

Пытаюсь от таблиц отучиться и научиться современным приёмам. Таблицы единственный способ?

Edited March 27, 2014 by PavelTkachev

[klierik]

если требуется по-центру экрана как вертикально так и горизонтально, то table лучший вариант на сегоднящний день.

[PavelTkachev]

Спасибо за ответы!

[npofopr]

Пытаюсь от таблиц отучиться и научиться современным приёмам.

display: table; тогда) если уж современности хотите. 

[Great Rash]

Если уж к современности то можно заюзать flexbox, правда для ИЕ<11 придётся JS подключать.

[PavelTkachev]

Что-то у меня и без современности не получается...

http://jsfiddle.net/eVQn4/

 

Не могу сделать чтобы было по центру вертикально.

[Great Rash]

http://jsfiddle.net/eVQn4/1/

[PavelTkachev]

Но это просто куча DOM элементов! Разве нет способа требующего меньше элементов, и при этом работающего в современных браузерах?

 

Я не знаю способа как сделать прямоугольный блок в центре экрана. В моём представлении, если этого добиться, то внутри можно сделать block-inline.

[Great Rash]

Разве нет способа требующего меньше элементов, и при этом работающего в современных браузерах?

flexbox 

UPD: можно еще вот так попробовать