こんばんは！本日はCSSを使って要素を中央に持ってくる方法のお話をしたいと思います！
なぜこんな話を？
まぁ、要素を中央に持ってくるなんてしょっちゅうある訳で、そんなの知ってるし！って思うとは思うのですが、昨日と今日、職場でハマったことがあったので、メモ的な意味でもおさらいしようと思いました。
CSSで中央寄せ
今回はこんな感じのHTMLでbクラスのdivをaの中央にしたいとしましょう。
<div class="a">
<div class="b"></div>
</div>
基本的にいつも個人での制作時は
.a{
position: relative;
}
.b{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
というコードか、もしくは
.a{
position: relative;
}
.b{
position: absolute;
top: calc(50% - 高さ / 2);
left: calc(50% - 幅 / 2);
}
といった感じでやっていて、特に問題があったことはありません。
しかし…
職場では、基本的にIE8対応が必須なのですが、よくよく考えたら上の2つは両方IE8に対応してないのです。
以前は違う書き方でやってたはずなのに、全然やり方を思い出せず…調べてみると
.a{
position: relative;
}
.b{
margin-top: -(高さ / 2)px;
margin-left: -(幅 / 2)px;
position: absolute;
top: 50%;
left: 50%;
}
うんうん、そうだったそうだった。こんなコードだったなぁと思い出しました。
だが…
IE9だけでズレる？
上記コードで何故かIE9だけmarginをマイナスした分だけズレるという現象に…
IE9だけ上手くいかなかった…
IE8は問題ないのにIE9だけダメっていう珍しいパターンにハマりました。
とゆーのも、上のサンプルHTMLであればこれで何の問題もないと思うのですが、今回はこんな感じの状況でした。
<table>
<tbody>
<tr>
<td class="a">
<div class="b"></div>
</td>
</tr>
</tbody>
</table>
div.bをtd.aの中央(今回は上下中央のみ)にしたいという状況だったのですが、上に書いたCSSだと上手くいかなかった…IE9だけ。
なんでや！！これはなんでや！！と心の中で叫びながら、原因を探ってみたのですが、結局よく分かりません…
ただ、tableのデフォルト値はvertical-align:middle;らしく、どうやらその辺が関係ありそうな感じ。
解決策として
positionを使わない！！
たったこれだけでした。
よくよく考えたらtdはvertical-alignの対象なので、middleが入っていれば上下中央は出来たんだということに最後の最後に気づきました…
灯台下暗し…
色んなことを覚えて、便利に使っているつもりでも、基本を忘れちゃダメですね…
そんな感じで「要素の中央寄せのおさらい＆テーブルは気をつけろ！！」でした！
ありがとうございました！