技術

どの端末で見ても、要素を上下左右の中央に配置する!

投稿日:2019年9月11日 更新日:

こんにちは。たなかです。

最近はスマホで表示するWebアプリの開発をさせてもらっています。

どの端末でみても、要素を上下左右の中央に配置したい!というシチュエーションに遭遇したので、対応を備忘録的にメモしておきます。

単位vhを使おう!

vhは「viewport height」の略で、css3からvw(viewport width)とともに追加されたそうです。

vhを利用することで、画面サイズの高さに対する割合を指定することができます。

コンテンツを画面の真ん中に配置したい……そんな時は、

  margin: 50vh auto 0;
  transform: translateY(-50%);
  text-align: center;

こんな具合で書いてやることで…

画面の真ん中に要素が配置されました!!

タブレットでも…

画面を縦(ポートレート)にしても…

ちゃんと真ん中に揃っています!

ポイントとして、要素の位置が左上から計算されるので、vhだけでは真ん中より若干下に配置されてしまいます。

それを「translateY(-50%);」で高さの半分の値を引き戻すことで、ぴったし真ん中に位置することができました。

position: absolute;でゴリっと書くと、端末によって位置がズレちゃうな〜というので悩んでいたので、解消できてよかったです。

短いですが今回はここまで。

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[SSL] let’s encryptの更新でエラー?!

どうも中田です。 無料でSSL証明書が取得できる今日この頃、いかがお過ごしでしょ …

[ Ionic ]キーボード出現時にフッターを押し上げてしまう問題の対応

こんにちは。たなかです。 IonicFrameworkでモバイルアプリを開発させ …

no image

【Rails】helperからbrタグを含めた文字列を返したい時

こんにちは プライベートではもっぱらRailsを触っています。 触ってからそんな …

no image

【ionic】$ionicHistory.clearCache()が効かぬ!

どうも中田です。   ログアウトしたら、viewの情報を初期化したい! …

esaに貼る画像をリサイズする方法

こんにちは。たなかです。 みなさん、esa使ってますか? esaは「情報を育てる …