技術

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

投稿日: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

【Rails】El Captain で’$rails s’ が動かない件

どうも中田です。 開発用MacをEl Capitanにアップデートしたところ r …

no image

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

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

no image

[TypeScript]enumを代入記法で書いた場合に、値からキーが取れるか調べてみた。

TypeScriptのenumのドキュメント(TypeScript Deep D …

[Rails] モデルが初期化されてないとな(not initialized)

どうも中田です Railsで、modelの initialize に処理を追加す …

Dockerでwheneverが動かない (bundler: failed to load command: bin/rails (bin/rails))

どうも中田です。 久々の投稿になります。 正確にはwheneverで登録したcr …