画面の中央にドンっと表示する
「しばらくお待ちください」とだけ表示したいページなど、案外使う場面が多いけれど
天地の中央に置くcss設定をつい忘れがちなのでメモ
そもそも vertical-align:middle は
高さの違うインライン要素の垂直方向の位置を揃えるためのプロパティ
ということをつい忘れて使おうとしちゃうんですよね。
こちらのサイトがとても分かりやすく参考になりました。
http://htdsn.com/blog/archives/css-center-position.html
親要素に display: table-cell; を指定した上でvertical-alignプロパティを使用すると、子要素の垂直方向の配置位置の指定が可能となります。
つまり
html に
display: table; body に vertical-align: middle; を指定すればうまくいきました。 サンプルは、こちら
この記事へのコメントはありません。