垂直センターは、私は、次のHTMLを持っているCSS

Question

でテキストを回転させます。 div.innerを90度回転させます。私はテキストを "Centered？"コンテナdivの中央に表示されます。私はdivのサイズを事前に知っていません。

これは閉じる：http://jsfiddle.net/CCMyf/2/です。あなたはtransform: rotate(-90deg)スタイルが適用される前にテキストが中央に配置されていることがjsfiddleからわかりますが、ややオフセットしています。これは特に、div.outerが不足している場合に顕著になります。

事前にサイズを知らなくてもこのテキストを垂直にセンタリングすることはできますか？この問題を解決するtransform-originの値は見つかりませんでした。

Answer 1

キーが-50％〜50％の位置の上部と左を設定し、transformXとtransformYすることです。

.inner { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

.rotate { 
    transform: translateX(-50%) translateY(-50%) rotate(-90deg); 
} 

参照：テキストはそれにスペースが含まれている場合、それが失敗したとして「bjnsn」からhttp://jsfiddle.net/CCMyf/79/

Answer 2

「回転」クラスにmargin: 0 auto;を追加して、テキストを中央に配置できますか？削除

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -ff-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    width: 16px; /* transform: rotate() does not rotate the bounding box. */ 
    margin: 0 auto; 
} 

Answer 3

：.innerからmargin-top: -7px;は私のために中央に縦方向に回転したテキストを作りました。また、水平のテキストを中央に配置しませんでした。

上記のコードを削除するだけですか？あなたがここに見ることができるように、あなたの.on('change')関数に

$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height()); 

を：：

Answer 4

あなたは、これを追加することができhttp://jsfiddle.net/darkajax/hVhbp/

Answer 5

それはその質問に答えるために少し遅れる場合がありますが、私は同じ問題につまずい途中で別のdivを追加して、それを達成する何らかの方法を見つけました。いくつかの位置決めものと共に

<div class="outer"> 
    <div class='middle'><span class="inner rotate">Centered?</span></div> 
</div> 

及びその中間要素上text-align: centerを適用すること、：

.middle { 
    margin-left: -200px; 
    width: 400px; 
    text-align: center; 
    position: relative; 
    left: 7px; 
    top: 50%; 
    line-height: 37px; 
} 

.innerも両方rotateとtext-align特性を可能にするために、display: inline-block;を得ます。ここ

は、対応フィドルある：http://jsfiddle.net/CCMyf/47/

Answer 6

答えは良いが、完璧ではありません。例えば、彼は 'Centered？'テキストとして変更した場合、テキストを 'Centered？そうでなければ、うまく動作せず、スペースの次の行を取るでしょう。 Therは内側のdivブロックに対して定義された幅または高さではありません。

.inner { 
    font-size: 13px; 
    font-color: #878787; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: #DDD; 
} 

https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/ しかし、我々は、外側のdivの高さに等しい内側のdivの幅を設定することにより、適切に内側外側のdivの幅に等しく、DIVおよび設定の行の高さを全体のテキスト中心整列を行うことができalign-items：centerとjustify-content：centerプロパティで内部divの表示flexプロパティ。要素にtable`：

.inner { 
    font-size: 13px; 
    font-color: #878787; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    display: flex; 
    justify-content:center; 
    align-items:center; 
    line-height:40px; 
} 
$('#height').on('change', function(e) { 
    $('.outer').css('height', $('#height').val() + 'px'); 
    $('.inner').css('width', $('#height').val() + 'px'); 
}); 

更新フィドルhttps://jsfiddle.net/touqeer_shakeel/cjL21of5/