Как разместить блок неизвестного размера точно в центре страницы
Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".
Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее 
Статья, на которую я наткнулся — это перевод статьи Криса Койера (Chris Coyier) Quick CSS Trick: How To Center an Object Exactly In The Center. При этом высота и ширина центрируемого объекта в статье полагаются известными. Что ж, я ожидал чего-то большего.
Я сначала вкратце опишу идею Криса, потом расскажу, почему так не надо делать и затем покажу, что простого решения, удовлетворяющего всем требованиям, нет
Начнём. Пусть у нас имеется, например, <div> размерами 200×100 пикселей. Поступаем следующим образом:
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; /* 50% высоты */
margin-left: -100px; /* 50% ширины */
height: 100px;
width: 200px;
}
Начнём с того, что IE6 position: fixed очень плохо понимает. Для него нужно добавить небольшой хак:
position: absolute;
}
Теперь о минусах:
- размеры блока должны быть известны;
- при уменьшении окна так, чтобы оно перекрывало отцентрированный объект, скроллер хотя и появляется, но прокрутить отцентрированный объект не сможет (из-за
position: fixed); - при уменьшении ширины окна можно дойти до такого размера, когда у объекта границы станут отрицательными.
Теперь о реализации центрирования в общем виде (считаем, что высота объекта нам неизвестна; ширина же должна быть известной, так как блочный элемент, не имеющий явно заданной ширины автоматически получает width: 100%). Решение основывается на идеях, представленных в следующих статьях:
- Вертикальное выравнивание без таблиц;
- Нижний колонтитул — в нижней части страницы;
- Подборка CSS-хаков для различных браузеров.
Разметка:
<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere?
</div>
</div>
</div>
</body>
Прочитавшим статью "Вертикальное выравнивание без таблиц" должно быть ясно, откуда "растут ноги" у этой разметки.
Стили будут почти аналогичными приведённым в той статье, но с небольшими изменениями для IE.
Начнём со стилей для нормальных браузеров:
overflow: <span class