コンテンツがオーバーフローしてもCSS div内のコンテンツの絶対的なセンタリング

Question

これは、divを囲むdivよりも広い場合でも、HTML 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

Aligning image to center inside a smaller divに基づいて、私はこれを作った：http://jsfiddle.net/thirtydot/x62nV/2/。

WebKitブラウザ以外では、マウスを上下に動かすとテキストが非常に不安定になります。