Блог Dvvarf

Сегодня нужно было по работе сделать центровку дива. Проблема осложнялась тем, что ширина дива неизвестна, а посему такое классическое решение:

<div style="width: 200px; margin:  < /span> auto;">
    <!-- тут какой-то текст -->
</div>

не проканало. После долгих поисков по гуглу, где практически в 100% случаев на вполне конкретный вопрос “Как отцентровать блок неизвестной ширины?” давался вышеуказанный пример, я решил изобрести свой велосипед. Поэтому представляю вашему вниманию мой метод центровки блока неизвестной ширины (хоть в одиночку на странице, хоть внутри какого-то блока):

<div style="width: 100%; overflow: visible;">
    <div style="margin-left: 50%; position: relative; float: left;">
        <div style="right: 50%; position: relative;">
        <!-- здесь всё, что душе угодно -->
        </div>
    </div>
</div>

Мини-демо.
Как оказалось, в IE6 данный метод не работает, а в IE5.5 блок с контентом и вовсе уезжает куда-то за пределы страницы, так как, видимо, переживает переезд на 50% дважды в одну и ту же сторону.
Естественно, по-правильному всё содержание атрибутов style нужно перенести в CSS. Я указал всё через стайлы для наглядности.
P.S. Да, тестировалось в doctype‘е XHTML 1.0 (не знаю, как будет вести себя код в quirks mode).
P.P.S. Извиняюсь перед всеми, для кого данный метод не подходит по тем или иным причинам не подходит, а так же перед теми, кому данный метод уже тыщу лет как известен. Так же, возможно, когда-нибудь этот пост увидит кто-нибудь действительно разбирающийся в CSS и подскажет мне, почему данный метод может не работать в том или ином месте. Буду рад любым предложениям и критике.
Updated 15.04.2010 в 23:35: добавил overflow на всякий случай.