デザイン・ホームページ・印刷のことならアートクリック

京都のデザイン・ホームページ制作会社

アートクリックのスタッフブログ

TOP > ブログ > 【CSS】上下左右の中央寄せする方法

【CSS】上下左右の中央寄せする方法

2018年09月13日

【CSS】上下左右の中央寄せする方法

ホームページのコーディングをしているとちょくちょく出てくるのが「上下左右の中央寄せ問題」
左右中央は簡単ですが、上下の中央寄せはわりとめんどう。
左右中央もfloatを使う必要があると、一気にめんどくさくなる。

最近は「display: flex」に対応したブラウザが増えているので、これを使うと簡単に対応することができます。

.hoge {
  display: flex;
  align-items: center;/*上下中央寄せ*/
  justify-content: center;/*左右中央寄せ*/
}

このクラスを、divやulやdlなんかに入れて使います。