freelancemate
cover

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

作成日:2022年05月13日 更新日:2022年05月13日

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

左右中央揃え

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を用いた中央揃えです。そのほかの方法でも実装できますし、難易度も大きく変わりはしないので、いずれかの方法で試してみてください。

当サイトでおすすめのプログラミングスクール

RUNTEQ

働きながらレベルの高いスキルを身につけることができるので、おすすめ!

プログラミングスクールの口コミ・評判記事