【CSS】要素の中央揃えは”flex”で簡単！

公開日 2021/12/12 最終更新日 2022/1/13

今回はCSSのflexを使って中央揃えにする方法を紹介します！

やま

flexを使って中央揃えにするプロパティ”justify-content: center;”

<div class="container">
  <div class="container__block"></div>
  <div class="container__block"></div>
</div>

container {
  /* 子要素を横並びに */
  display: flex;
  /* 子要素を中央揃えに */
  justify-content: center;
  /* 背景を白色に */
  background-color: #fff;
}

.container__block {
  /* 幅を200pxに */
  width: 200px;
  /* 高さを200pxに */
  height: 200px;
  /* 要素の間隔を10pxに */
  margin: 10px;
  /* 背景を#222に */
  background-color: #222;
}

↓こんな感じに中央寄せになります。ブラウザの幅が変わっても中央寄せをキープしてくれます。

上下中央にしたい場合は”align-items: center;”を追加しましょう。

これはテキストの上下中央揃えにできるので便利。テキストの高さ揃えるときにtext-alignプロパティやvertical-alignプロパティを使うと面倒くさいですし

container {
  /* 子要素を横並びに */
  display: flex;
  /* 子要素を中央揃えに */
  justify-content: center;
  /* 背景を白色に */
  background-color: #fff;
 /* 上下中央に */
  align-items: center;
}

※ブロックの高さに依存するのでブラウザの高さを変えても付いてきません。

ちなみにですが、display: flex;は親要素直下の子要素にしか効きません。孫要素には効かないんです。

チートシートが便利

display: flex;はflexboxとも呼ばれていて横並びにするときに必ずと言っていいほど使います。しかもIE11でも対応しています。

並べ方の自由度は高いのでチートシートを参考にするといいと思います。
僕は毎回Webクリエイターボックスさんのチートシートを参考にさせて頂いています。まじで分かりやすい。

日本語対応！CSS Flexboxのチートシートを作ったので配布します

MDNもよく参考にしています。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

横並びにしたくないけど中央に揃えたいときはflex-direction: column;を使用するといいですね。

その他の中央揃え方法

position: absolute;で中央揃え

要素を絶対配置にして中央揃えにする方法です。

.container {
  height: 400px;
  position: relative;
}

.container__block {
  background: #000;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

display: grid;で中央揃え

.container {
  border: solid 1px #000;
  display: grid;
  place-items: center;
}

.container__block {
  background: #000;
  width: 200px;
  height: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
}

※IEは対応していません。

いずれは主力になりそうなgridレイアウト。
案件で使うことが多くなってきそうなので理解深めときたいですね

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

`margin: auto;`を使う方法

.container {
  height: 400px;
  border: solid 1px #000;
  display: flex;
}

.container__block {
  background: #000;
  width: 200px;
  height: 200px;
  margin: auto;
}