プログラミング

プログラミング

【意外と知らない?】簡単!CSSで縦方向に中央配置する方法

607 views

ウェブ開発を勉強し始めた人によく聞かれることが、CSSで縦方向に中央配置する方法です。本記事ではいくつかの方法をご紹介します。

 

 

 

Position Absolute:で縦方向に中央配置

中央配置したい画像がある場合、まずHTMLにdiv要素を設定し、画像をその中に置きます。そしてCSSで大きさや背景色を追加します。

 

 

 

次にposition relativeを親要素に、position absoluteを子要素(この場合は画像)に加えます。

 

 

 

次にtop:50%を子要素に加えます。

 

 

 

この段階ではまだ縦方向に中央配置はされていません。Topからのマイナスのmarginを、中央配置したい要素(この場合は画像)に設定します。

 

 

vertically①

 

 

 

Display:tableで縦方向に中央配置

Display:tableを使用して中央配置することも可能です。まず、div要素の中に、画像の入ったdiv要素を設定し、スタイルを追加します。

 


 

 

次に親要素にdisplay:tableを追加します。

 

 

 

そしてdisplay: table-cellを画像要素を包括しているdivに追加します。

 


 

 

恐らくまだ中央に配置されていないと思います。vertical-align: middleを、画像要素を包括しているdivに追加すれば、完成です。

 

 

 

vertically②

 

Flexboxで縦方向に中央配置

Flexboxでも中央配置が可能です。ただし、Flexboxをサポートしているブラウザーが少ない(IE8,9はサポートしていない)ことから、これは今のところベストな選択とは言えません。

まず、画像を入れ込んだdv要素を設定し、基本的なスタイルを記述します。

 

 

 

そしてdiv要素にdisplay:flexを追加します。

 


 

最後にdiv要素にalign-items:centerを追加します。

 

 

 

vertically③

 

これで、CSSで縦方向に中央配置する方法が分かったのではないでしょうか。本記事から何か学んで頂けたのであればうれしく思います!

 

 

 

 

※本稿は 「Can you vertically center in CSS?」を翻訳・再編集したものです。

関連記事

おすすめ記事