CSSのみでHTML要素を上下左右に中央寄せする

CSSのみでHTML要素を上下左右に中央寄せする

CSSで左右を中央寄せにする方法は簡単ですが、上下左右を中央寄せするのは意外と難しいものです。

ですので今回は私がよく使うCSSのコードを紹介致します。

CSSのみで要素を上下左右に中央寄せにする

基本的に上下左右を中央寄せする様なシーンは親要素に対して小要素(文字や画像)を中央に置く場合だと思います。

左右を中央寄せし上下にはpaddingで余白をとり上下左右の中央に配置する方法がよく使用されますが、汎用性が乏しいところに難点があります。

縦幅を一定の高さを保つ場合や、文字の改行、背景画像の大きさに寄って余白を綺麗に保つのは困難です。

こういった場合、私がよく使うのは下記のコードです。

/* 親要素 */
.parents {
  position: relative;
}
/* 子要素 */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

これは親要素の左上を基点に、50%ずつズラして配置し小要素の上下左右の50%分を戻すという方法です。

cssの説明図

この方法のメリットは小要素の大きさが変わっても必ず中央に配置できる点です。

応用

また違った配置もこの方法だと簡単にできます。

例えば下に寄せて左右中央に配置する場合は下記のコードに修正します。

/* 親要素 */
.parents {
  position: relative;
}
/* 子要素 */
.child {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}

下に固定なのでtransformYを記述せずbottomを0にするだけです。

これの方法であれば上下左右のどこかに固定しながら常に中央に配置することも可能です。

WEBカテゴリの最新記事