高さが可変の要素を上下中央揃えにする方法

こんにちは、高さをCSSで動的にいじることって案外むずかしいですよね。

例えばiFrameを内容に合わせて大きくするといったことなどが挙げられます。

今回は文章の追加などで高さが変わると想定される要素を親要素の上下中央揃えにした備忘録です。

実際のコードです。

HTMLは以下。

<div class="parent">
<p class="text-block">中央揃えになる部分</p>
</div>

div.parent{
height:500px;
}
p.text-block{
position:absolute;
top:0;
bottom:0;
margin-auto;
}

text-blockの高さが固定であればCSSで高さを設定し終了ですが、今回は可変なのでjavascriptで高さを動的に設定する必要があります。

要素の高さを取得し、javascriptで設定します。

$(function() {
var b = $('#text-block');
$('#pearent').height(b.height());
});

以上になります。

他にも色々な方法があるので目的にあった方法を選びましょう。