CSS の色々な「上下左右の中央揃え」を試してみた

CSS で上下左右の中央揃えをする際、ブロック要素を対象とするのであれば Flexbox を利用して `display: flex;` `justify-content: center;` `align-items: center;` での中央寄せ方法がメジャーだと思います。

### Flexbox を活用した上下左右の揃え方

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYqjXjy" data-user="masahiro111" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masahiro111/pen/LYqjXjy">
  Untitled</a> by Masahiro (<a href="https://codepen.io/masahiro111">@masahiro111</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

上記のように簡単に上下左右の中央揃えを実現することができます。しかし、それ以外の方法もありまして、CSS の知識を深めるためにも、上記の例以外で上下左右中央揃えをする方法をご紹介したいと思います。

### `display:flex;` と `margin:auto;` で中央揃え

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="mdvMQZQ" data-user="masahiro111" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masahiro111/pen/mdvMQZQ">
  Untitled</a> by Masahiro (<a href="https://codepen.io/masahiro111">@masahiro111</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

中央揃えをしたいブロック要素に `margin:auto;` を指定し、加えてその **親** に `display:flex;` を指定する方法でも上下左右のセンタリングが可能です。

### `display:grid;` で中央揃え

中央揃えをしたいブロック要素の親に `display:grid;` を指定して、中央に揃えたいブロック要素に `place-self:center;` を指定することで真ん中に配置することもできます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="zYedyzp" data-user="masahiro111" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masahiro111/pen/zYedyzp">
  Untitled</a> by Masahiro (<a href="https://codepen.io/masahiro111">@masahiro111</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

この `display:grid;` は、中央揃えをしたい要素が複数ある場合、以下の例のように `display:grid;` `place-content:center;` を一緒に指定すると真ん中に寄るように配置することもできます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYqjMeg" data-user="masahiro111" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masahiro111/pen/LYqjMeg">
  grid place-content</a> by Masahiro (<a href="https://codepen.io/masahiro111">@masahiro111</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### `position:absolute;` で中央揃え
中央揃えをしたい要素に `position:absolute;` `inset:50%;` `translate:-50% -50%;` を指定し、その親要素に `position: relative;` を指定します。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="QWYMzQK" data-user="masahiro111" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/masahiro111/pen/QWYMzQK">
  Untitled</a> by Masahiro (<a href="https://codepen.io/masahiro111">@masahiro111</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---
このように「上下左右の中央揃え」を実現する方法は複数あるのでコーディングの際はケースバイケースで使い分けて試してみると良いかもしれません。

参考 URL: https://www.youtube.com/shorts/7I6pb2MHRQg