テーブルを使わない天地中央揃え ie9以上対応 css
テーブルを使えない場面で天地中央の必要があったのでまとめました
動的で何行でるかわからなかったのでtransformで対応しました
実際このコードでうまくいってるか確認してないので間違ってるかもしれません...
ベースのhtml
<main> <div class="box"> このdivタグを中央揃えしたい。 </div> </main> <style> html, body, main { height: 100%; } .box { border-radius: 4px; border: 1px solid #E63E3E; width: 300px; height: 200px; } </style>
Flexbox // IE11以上
main { display: flex; justify-content: center; align-items: center; }
たった4行! CSS3 Flexboxを使った史上最短の上下中央揃え2016年版 - Qiita
calc() // IE9以上
.box { margin: calc(50vh - 100px) auto; }
transform // IE9以上
.box { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }