【簡単CSS】上下左右中央揃え、左右中央揃え、上下中央揃えのコードの書き方まとめ

いつも実装したいときに実装方法を忘れてしまうので、中央揃えの方法をまとめておきます。

左右中央揃え

text-align: center

<p style="text-align: center">
   真ん中
</p>

display: block; margin: 0 auto;

<span style="display: block; margin: 0 auto;text-align: center;">真ん中</span>

display: flex; justify-content: center;

<div style="display: flex; justify-content: center;">
   <p>
    真ん中
   </p>
</div>

max-inline-size: max-content; margin-inline: auto;

<div style="max-inline-size: max-content; margin-inline: auto;">
   <p>
    真ん中
   </p>
</div>

最も簡単なものはtext-align: centerによる中央揃えです。但し、text-align: centerだけではうまくいかない場合には、display: blockで調整したる、display: flexを使うと対応可能です。
display: flexは比較的容易で様々な配置を実現できるので、この機会に覚えておくのもよいでしょう。

上下中央揃え

display: flex; align-items: center;

<div style="height: 100px; display: flex; align-items: center;">
   <p>
    真ん中
   </p>
</div>

position: relative; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%)

<div style="position: relative; height: 100px;">
   <div style="position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%)">
    <p>
     真ん中
    </p>
   </div>
</div>

display: table; display: table-cell; vertical-align: middle

<div style="display: table; height: 100px">
   <div style="display: table-cell; vertical-align: middle">
    <p>
     真ん中
    </p>
   </div>
</div>

上下の中央揃えも様々な方法がありますが、flex: align-itemsを使うと簡単に調整が可能でおすすめです。

上下左右中央揃え

display: flex; justify-content: center; align-items: center;

<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
  <div>
   <p>
    真ん中
   </p>
  </div>
 </div>

position: relative; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);

<div style="position: relative; height: 100px">
  <div style="position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);">
   <p>
    真ん中
   </p>
  </div>
</div>

display: table; display: table-cell; vertical-align: middle;

<div style="display: table; height: 100px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">
   <p style="text-align: center;">
    真ん中
   </p>
  </div>
</div>

上下左右の中央揃えはこれまで紹介してきました方法の組み合わせでできます。圧倒的に簡単だと感じるのは、display: flexを用いた中央揃えです。そのほかの方法でも実装できますし、難易度も大きく変わりはしないので、いずれかの方法で試してみてください。