Абсолютное центрирование контента в CSS div, даже если содержимое переполняет окружающий div

Question

Я пытаюсь сделать текст абсолютно центрированным внутри HTML-div, даже когда он шире, чем вмещающий div.

Текст выравнивается по центру, если он меньше вложенного div, но когда он превышает ширину вмещающей ширины, он выравнивается по левому краю (я проверял это в последних версиях Chrome, FF, IE).

У меня есть это:

    <style>
   .container {
        position: relative;
        width: 300px;
        height: 200px;
        text-align: center;
        margin: auto;
        white-space: nowrap;
        overflow: hidden;
        background: silver;
    }

    .line {
        position: absolute;
        width:100%;
        font-size: 40px;
    }

    </style>

    <div class="container">
        <div class="line">
            PLEASE ALIGN ME TO THE CENTER
        </div>
    </div>

См. http://jsfiddle.net/acc4u/5/ для действующей версии кода выше - Вы можете уменьшить размер шрифта, чтобы увидеть, как он выравнивается по центру, когда уже.

Я мог бы использовать атрибут left:-nnpx css, и это сделало бы работу, но это было бы чрезвычайно негибко, поскольку мне нужно было бы вычислить ширину текста для вычисления смещения. Поскольку я намерен анимировать размер текста, его необходимо будет рассчитать динамически.

Answer 1

На основании Выровняв изображение по центру внутри меньшего div , я сделал это: http://jsfiddle.net/thirtydot/x62nV/2/.

Кажется, хорошо, за исключением того, что в браузерах WebKit, когда вы перемещаете мышь вверх и вниз, текст очень шаток.