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

公開日:2016/07/06 更新日:2020/02/24

こんにちは、高さを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());
});

以上になります。

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

上杉 洋

1991年生まれ。株式会社ステップバイワーク代表。2013年からホームページ制作の業界に入り、以後フリーランスを経て2022年に起業。 独自の理論で費用対効果の高いホームページを作るため日々精進しています。