CSS

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

2018年5月20日

こんにちは!土門大貴(daikidomon)です。

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

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

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

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

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

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

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

↓がHTMLタグのサンプルになります。
<div class="parent">
<div class="child">
</div>
</div>
説明のためにparentクラスとchildクラスの大きさを指定しておきます。
.parent {
width: 300px;
height: 200px;
}

.child {
width: 150px;
height: 70px;
}
 

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

display:flex; の方法は簡単で、親要素に↓のスタイルを設定します。
.parent {
display: flex;
align-items: center;
justify-content: center;
}
まずはdisplay:flex;フレックスコンテナボックスとして指定します。

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

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

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

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

まずは始めに親要素position:relative;を設定します。
footer {
position: relative;
}
次に子要素にはposition:relative;で上下中央揃に揃えます。
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
topで上から50%と指定し上下中央に配置させ、leftで左に50%移動と指定して左右中央揃えにします。

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

 

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

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

関連記事

-CSS

Copyright© スタートアップIT企業社長のブログ , 2020 All Rights Reserved.