個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。
display:flexを使って実現する方法です。
とても簡単でコードもシンプルなので、ご参考になれば幸いです。

display:flexを使ってCSSで上下左右センターに

CSSを使って上下左右センターにする方法はいろいろありますが、このdisplay:flexを使う方法がもっとも簡単でコードもシンプルになりそうです。

HTML

HTMLは以下のような感じです。
実際に使用する場合は、div部分を用途に合わせて変えてください。

CSS

続いてはCSS。

min-height: 100vhの「vh」は「viewport height」の略称になります。
%と何が違うのかというと、「デバイスの画面」を基準にするところです。
これでmin-heightがうまく効かないデバイスでも機能するようにします。
display: flexでフレックスボックス化します。
align-items: centerで上下センターに。
justify-content: centerで左右センターに。
flex-direction: columnは改行したときの方向へ並ぶようにするプロパティです。これで、2つ以上の要素を上下に並べます。

Demo

こんな感じ完成です。

See the Pen YywoPv by yugusato (@yugusato) on CodePen.

IE10+, Chrome, Firefox, Safariに対応しています。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 12

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」

CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

今この瞬間もサイバー攻撃が行われている!DDoS攻撃を可視化する「Digital Attack Map」に戦慄

戦慄を覚えるマップです。 サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が

記事を読む

見ている人を魅了するcodrops作成のマウスオーバーエフェクト21

ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21

CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ

記事を読む

Chromeのタブをクリックするだけで音声を消す方法

Chromeのタブをクリックするだけで音声を消す方法

Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの

記事を読む

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3の色名147色(RGB、HEX16進カラーコード併記)

CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。 私は知りませんでした。

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+

海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと

記事を読む