CSS Web

[コピペでOK]CSSでBlock要素を上下左右中央揃えにする方法

投稿日:2018年5月20日 更新日:

こんにちは!シミダイ(@shimidai2100)です。

HTML・CSSのコーディングでBlock要素を上下左右中央揃えの方法を紹介したいと思います。

左右揃えはmargin:0 autoを使用することで簡単に中央揃えすることができますが、上下中央揃えはクセがあるため簡単には中央揃えが出来ません。

この記事を読んで上下左右中央揃えをマスターしましょう。


上下左右中央揃えはどんなイメージ?

上下左右中央揃えとは↓のイメージになります。

親要素Parentの中の子要素Childが上下中央揃えになるということです。

今回のサンプルでは、親要素にparentクラス、子要素にchildクラスを設定させます。

↓がHTMLタグのサンプルになります。

説明のためにparentクラスとchildクラスの大きさを指定しておきます。

 

display:flex;でflexbox使用した中央揃え

display:flex; の方法は簡単で、親要素に↓のスタイルを設定します。

まずはdisplay:flex;フレックスコンテナボックスとして指定します。

align-items: center;上下中央揃えにさせます。

justify-content:center;を指定することで左右中央揃えにさせます。

親要素にposition: relative、子要素にposition: absoluteで中央揃え

2つ目の方法は、子要素を親要素のどの位置に配置させるかを指定する方法です。

まずは始めに親要素position:relative;を設定します。

次に子要素にはposition:relative;で上下中央揃に揃えます。

topで上から50%と指定し上下中央に配置させ、leftで左に50%移動と指定して左右中央揃えにします。

transformを使用することで子要素の大きさをレスポンシブに変化させます。

 

昨今のモバイルファーストの考えでは、上下左右中央揃えにさせるデザインがほとんどです。

必ずコーディング方法をマスターしましょう。

スポンサードリンク

関連記事

-CSS, Web

Translate »

Copyright© shimidai2100 , 2018 All Rights Reserved.