CSSで上下センター揃え

PR　当ページのリンクには広告が含まれています。

上下センター揃え

フレックスボックス

「display: flex」を使います。

親{display: flex;
  justify-content: center;
  align-items: center;}

左右センターは「justify-content: center;」、上下センターは「align-items: center;」で揃えます。

インライン要素の場合

セレクタ{display: inline-block;
  vertical-align: middle;}

テーブル要素にする

親{display: table;}
子{display: table-cell;
vertical-align: middle;}

「absolute」を使う①

widthとheightを設定できるならこちら！

親{position:relative;}
子{position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;}

「absolute」を使う②

widthとheightを指定できないときはこちら！

親{position:relative;}
子{position:absolute;
top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);}