Rokiのチラ裏

学生による学習のログ

親クラスが動的なheightを持つ場合の一行テキストをjavascriptで縦横中央に配置する

考えれば分かる事だが、ウェブサイトを書いていて一考えしたので、一応メモ。
縦横中奥に配置するには、CSSのみで設定することができる。

#holder{ position:relative; }
#title { position:absolute; top:-50%; left:50%; transform:translate(-50%,-50%);}

しかし、設定の上で、ページ全体に適用されるjQueryプラグインなどを適用すると、依存関係で意図したとおりに表示されない事がよくある。top,left,right,bottomなどは、ページ全体に適用されるプラグインとなると、使用頻度が高いため、中々依存関係的に操作するのは厳しいところがある。
そこで今回は、意味合い的には全く変わってしまうがとりあえずマージンを取ってこの問題を回避することにした。...が、ページを開いたブラウザによってのマージン値が必要となるため動的処理をしなければならないので、javascriptで書く事にした。

var string_height=document.getElementById("parent_class").clientHeight;
var setting_height=window.innerHeight/2 - string_height/2;
document.getElementById("child_class").style.marginTop=String(setting_height)+"px";