CSS Web

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

2018年5月20日

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

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, Web

Copyright© shimidai2100 , 2020 All Rights Reserved.