技術

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

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

関連記事

no image

[Angular]APIから画像を取得して表示する

こんばんは アプリケーションを作っていてフロント側で画像を出すときって ストレー …

no image

document.querySelectorで色々なDOMを取得する

こんにちは javascriptでDOMを取得することは結構あるかと思います。 …

no image

[JavaScript]IEのif文の判定がchromeと違う?

こんにちは、コーテッグのこやまです。 今持っている案件で、IE対応を進めているの …

no image

auto_incrementの値を確認して変更

こんにちは、コーテッグのこやまです。 railsとmysqlを使っていて、自動で …

Webページまるごと画面キャプチャできるChromeの拡張機能「Full Page Screen Capture」

こんにちは。たなかです。 先日、チームのメンバーにスマホデザインのスクリーンショ …