技術

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

投稿日: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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[Angular6] Angularのユニットテストでprivate変数を読み込む

Angularでテストコードを書いている時、component側で定義しているp …

[Rails] エラー unable to convert unpermitted parameters to hash について

こんにちは。佐藤です。 今回はRailsのpermit!についての備忘録です。 …

[Xcode] SDK Version Issue – This app was built with the iOS 12.0 SDK. Starting March 2019, all iOS apps submitted to the App Store must be built with the iOS 12.1 SDK or later, included in Xcode 10.1 or later.

こんにちは。たなかです。 2019年、ブログ初更新になります。今年もよろしくお願 …

no image

【Vagrant】はじめまして!はじめました!

どうも中田です。 仮想マシンと言えば、VMWare、EC2、VirtualBox …

no image

RailsとAngularの省略できるコマンドいくつか

こんにちはコーテッグのこやまです。 私はTypoが多い方なので、コマンドは短い方 …