Category:Web

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にするだけです。

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

RECOMENDED

【2018年最新】超高機能でおすすめな無料プロトタイピングツールまとめ

プロトタイピングツールとは、Web制作やアプリケーション制作時における完成形をイメージしやす…

【クリック率倍増!】CTAのボタンの見直すべきポイント

CTAの最適化は出来ていますか?今回紹介するのはCTAのボタンで見直すべきポイントです。3つのポ…

Webライティングが捗り過ぎる!オススメの文章校正ツール「文賢」

ライティングは捗っていますか?今回紹介しますのは最強のオススメ文章校正ツールです。最近正…

ガチのPython初心者がDjangoを使ってWebアプリを作ってみる【導入編】

ガチのPython初心者がいきなりDjangoを使ってWebアプリケーションを作成するという無謀なチャレ…

これが欲しかった!HTML/CSSのみで作られた矢印アイコンのスニペット

Webサイトでよく使用される矢印アイコンをCodePenよりまとめました。よく使うものだからいちい…

おしゃれなHTMLテンプレートを無料で配布しているColorlibが有能すぎる

HTMLテンプレートを探しているときに見つけた「Colorlib」という配布サイトの紹介です。おしゃ…

もっと読む