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

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

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

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

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

”esa.io”を使ってみたのでレビューとおすすめの使い方

巷で噂の情報共有サービス”esa.io”の紹介をします。ずっと気になっていたサービスを実際に使っ…

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

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

CSSを非同期で読み込む方法【多分これが1番いいはず!】

全ブラウザ対応(IE9以下以外)のCSS非同期読み込みの方法を紹介します。ファーストビューで表示…

思わず見入ってしまう!おしゃれすぎるWebサイトまとめ【10選】

今回記事は、おしゃれなWEBサイトまとめです。私がおしゃれすぎて驚いた10個のWEBサイトをご紹…

もっと読む