【PR】を含みます。

フロントエンド

【CSS】要素を中央に配置する方法まとめ

要素を中央寄せにする方法まとめ

CSSで水平方向中央揃え、垂直方向中央揃え、上下左右中央揃えにする方法をまとめました。

実務でよく使用する・よく見かける方法を中心にまとめています。

CSSで水平方向中央寄せにする方法

text-alignで水平方向中央揃え

親となるブロック要素にtext-align: center;を指定することで、子のインライン要素を水平方向中央寄せにすることができます。

また、ブロック要素に記載されているテキストを水平方向中央寄せにすることもできます。

【サンプル】text-alignでテキストを水平方向中央揃え

テキスト

HTML
Copy
  1. <p class="box1">テキスト</p>
CSS
Copy
  1. .box1 {
  2.   text-align: center;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }

【サンプル】text-alignで画像を水平方向中央揃え

サンプル
HTML
Copy
  1. <div class="box1">
  2.   <img src="image URL" alt="サンプル">
  3. </div>
CSS
Copy
  1. .box1 {
  2.   text-align: center;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }

margin: 0 autoで水平方向中央揃え

子のブロック要素にmargin: 0 auto;を指定することで、親となるブロック要素の幅を基準として、水平方向中央寄せにすることができます。

text-align: centerとの違い

  • text-align: center;はインライン要素を中央寄せできるのに対し、margin: 0 auto;はブロック要素を中央に配置できます。

【サンプル】margin: 0 autoで1つのブロック要素を水平方向中央揃え

HTML
Copy
  1. <div class="box2">
  2.   <div class="box2_circle"></div>
  3. </div>
CSS
Copy
  1. .box2 {
  2.   height: 200px;
  3.   padding: 1em;
  4.   border: solid 1px #f09896;
  5. }
  7. .box2_circle {
  8.   margin: 0 auto;
  9.   width: 80px;
  10.   height: 80px;
  11.   background: #f09896;
  12.   border-radius: 100%;
  13. }

margin: 0 autoで複数の要素を水平方向中央揃え

【サンプル】margin: 0 autoで2つのブロック要素を水平方向中央揃え

HTML
Copy
  1. <div class="box2">
  2.   <div class="box2_circle"></div>
  3.   <div class="box2_circle"></div>
  4. </div>
CSS
Copy
  1. .box2 {
  2.   height: 200px;
  3.   padding: 1em;
  4.   border: solid 1px #f09896;
  5. }
  7. .box2_circle {
  8.   margin: 0 auto;
  9.   width: 80px;
  10.   height: 80px;
  11.   background: #f09896;
  12.   border-radius: 100%;
  13. }

display: flexで水平方向中央寄せ

親となる要素にdisplay: flex;とjustify-content: center;を指定することで、子要素を中央寄せにすることができます。

margin: 0 autoとの違い

  • margin: 0 auto;で複数の要素を中央寄せにした場合、縦並びになります。
    複数の要素を横並びで中央寄せにしたい場合、display: flex;を使用します。

【サンプル】display: flexで1つの要素を水平方向中央寄せ

HTML
Copy
  1. <div class="box3">
  2.   <div class="box3_circle"></div>
  3. </div>
CSS
Copy
  1. .box3 {
  2.   display: flex;
  3.   justify-content: center;
  4.   height: 200px;
  5.   padding: 1em;
  6.   border: solid 1px #f09896;
  7. }
  9. .box3_circle {
  10.   width: 80px;
  11.   height: 80px;
  12.   background: #f09896;
  13.   border-radius: 100%;
  14. }

display: flexで複数の要素を水平方向中央寄せ

【サンプル】display: flexで2つの要素を水平方向中央寄せ

HTML
Copy
  1. <div class="box3">
  2.   <div class="box3_circle"></div>
  3.   <div class="box3_circle"></div>
  4. </div>
CSS
Copy
  1. .box3 {
  2.   display: flex;
  3.   justify-content: center;
  4.   height: 200px;
  5.   padding: 1em;
  6.   border: solid 1px #f09896;
  7. }
  9. .box3_circle {
  10.   width: 80px;
  11.   height: 80px;
  12.   background: #f09896;
  13.   border-radius: 100%;
  14. }

positionで水平方向中央寄せ

親となる要素にposition: relative;を指定し、子要素にposition: absolute;、left: 50%;、transform: translateX(-50%);を指定することで、子要素を水平方向の中央に配置することができます。

【サンプル】positionで1つの要素を水平方向中央寄せ

HTML
Copy
  1. <div class="box4">
  2.   <div class="box4_circle"></div>
  3. </div>
CSS
Copy
  1. .box4 {
  2.   position: relative;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }
  8. .box4_circle {
  9.   position: absolute;
  10.   left: 50%;
  11.   transform: translateX(-50%);
  12.   width: 80px;
  13.   height: 80px;
  14.   background: #f09896;
  15.   border-radius: 100%;
  16. }

positionで複数の要素を水平方向中央寄せ

positionで水平方向中央寄せした場合の特徴
  • positionで複数の要素を水平方向に中央寄せした場合、要素同士が重なります。

【サンプル】positionで2つの要素を水平方向中央寄せ

HTML
Copy
  1. <div class="box4">
  2.   <div class="box4_circle"></div>
  3.   <div class="box4_circle"></div>
  4. </div>
CSS
Copy
  1. .box4 {
  2.   position: relative;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }
  8. .box4_circle {
  9.   position: absolute;
  10.   left: 50%;
  11.   transform: translateX(-50%);
  12.   width: 80px;
  13.   height: 80px;
  14.   background: #f09896;
  15.   border-radius: 100%;
  16. }
  18. .box4_circle:nth-child(2) {
  19.   width: 50px;
  20.   height: 50px;
  21.   background: #fff;
  22. }

CSSで垂直方向中央寄せにする方法

flexで垂直方向中央揃え

親となる要素にdisplay: flex;とalign-items: center;を指定することで、子要素を垂直方向中央揃えにできます。

【サンプル】flexで1つの要素を垂直方向中央揃え

HTML
Copy
  1. <div class="box5">
  2.   <div class="box5_circle"></div>
  3. </div>
CSS
Copy
  1. .box5 {
  2.   display: flex;
  3.   align-items: center;
  4.   height: 200px;
  5.   padding: 1em;
  6.   border: solid 1px #f09896;
  7. }
  9. .box5_circle {
  10.   width: 80px;
  11.   height: 80px;
  12.   background: #f09896;
  13.   border-radius: 100%;
  14. }

flexで複数の要素を垂直方向中央揃え

【サンプル】flexで2つの要素を垂直方向中央揃え

HTML
Copy
  1. <div class="box5">
  2.   <div class="box5_circle"></div>
  3.   <div class="box5_circle"></div>
  4. </div>
CSS
Copy
  1. .box5 {
  2.   display: flex;
  3.   align-items: center;
  4.   height: 200px;
  5.   padding: 1em;
  6.   border: solid 1px #f09896;
  7. }
  9. .box5_circle {
  10.   width: 80px;
  11.   height: 80px;
  12.   background: #f09896;
  13.   border-radius: 100%;
  14. }
  16. .box5_circle:nth-child(2) {
  17.   width: 50px;
  18.   height: 50px;
  19. }

flexで複数の要素を縦並び垂直方向中央寄せ

親となる要素にdisplay: flex;とjustify-content: center;、flex-direction: column;を指定することで、子要素を垂直方向中央寄せにできます。

【サンプル】flexで2つの要素を縦並び垂直方向中央寄せ

HTML
Copy
  1. <div class="box6">
  2.   <div class="box6_circle"></div>
  3.   <div class="box6_circle"></div>
  4. </div>
CSS
Copy
  1. .box6 {
  2.   display: flex;
  3.   justify-content: center;
  4.   flex-direction: column;
  5.   height: 400px;
  6.   padding: 1em;
  7.   border: solid 1px #f09896;
  8. }
  10. .box6_circle {
  11.   width: 80px;
  12.   height: 80px;
  13.   background: #f09896;
  14.   border-radius: 100%;
  15. }

positionで垂直方向中央寄せ

親となる要素にposition: relative;を指定し、子要素にposition: absolute;、top: 50%;、transform: translateY(-50%);を指定することで、子要素を垂直方向の中央に配置することができます。

【サンプル】positionで1つの要素を垂直方向中央寄せ

HTML
Copy
  1. <div class="box7">
  2.   <div class="box7_circle"></div>
  3. </div>
CSS
Copy
  1. .box7 {
  2.   position: relative;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }
  8. .box7_circle {
  9.   position: absolute;
  10.   top: 50%;
  11.   transform: translateY(-50%);
  12.   width: 80px;
  13.   height: 80px;
  14.   background: #f09896;
  15.   border-radius: 100%;
  16. }

positionで複数の要素を垂直方向中央寄せ

positionで水平方向中央寄せした場合の特徴
  • positionで複数の要素を垂直方向に中央寄せした場合、要素同士が重なります。

【サンプル】positionで2つの要素を垂直方向中央寄せ

HTML
Copy
  1. <div class="box7">
  2.   <div class="box7_circle"></div>
  3.   <div class="box7_circle"></div>
  4. </div>
CSS
Copy
  1. .box7 {
  2.   position: relative;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }
  8. .box7_circle {
  9.   position: absolute;
  10.   top: 50%;
  11.   transform: translateY(-50%);
  12.   width: 80px;
  13.   height: 80px;
  14.   background: #f09896;
  15.   border-radius: 100%;
  16. }
  18. .box7_circle:nth-child(2) {
  19.   width: 50px;
  20.   height: 50px;
  21.   background: #fff;
  22. }

CSSで上下左右中央揃えにする方法

flexで上下左右中央揃え

親となる要素にdisplay: flex;とjustify-content: center;、align-items: center;を指定することで、子要素を垂直方向中央揃えにできます。

【サンプル】flexで1つの要素を上下左右中央揃え

HTML
Copy
  1. <div class="box8">
  2.   <div class="box8_circle"></div>
  3. </div>
CSS
Copy
  1. .box8 {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 200px;
  6.   padding: 1em;
  7.   border: solid 1px #f09896;
  8. }
  10. .box8_circle {
  11.   width: 80px;
  12.   height: 80px;
  13.   background: #f09896;
  14.   border-radius: 100%;
  15. }

flexで複数の要素を上下左右中央揃え

【サンプル】flexで2つの要素を上下左右中央揃え

HTML
Copy
  1. <div class="box8">
  2.   <div class="box8_circle"></div>
  3.   <div class="box8_circle"></div>
  4. </div>
CSS
Copy
  1. .box8 {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   height: 200px;
  6.   padding: 1em;
  7.   border: solid 1px #f09896;
  8. }
  10. .box8_circle {
  11.   width: 80px;
  12.   height: 80px;
  13.   background: #f09896;
  14.   border-radius: 100%;
  15. }
  17. .box8_circle:nth-child(2) {
  18.   width: 50px;
  19.   height: 50px;
  20. }

flexで複数の要素を縦並び上下左右中央揃え

親となる要素にdisplay: flex;とjustify-content: center;、align-items: center;、flex-direction: column;を指定することで、子要素を上下左右中央寄せにできます。

【サンプル】flexで2つの要素を縦並び上下左右中央揃え

HTML
Copy
  1. <div class="box9">
  2.   <div class="box9_circle"></div>
  3.   <div class="box9_circle"></div>
  4. </div>
CSS
Copy
  1. .box9 {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   flex-direction: column;
  6.   height: 400px;
  7.   padding: 1em;
  8.   border: solid 1px #f09896;
  9. }
  11. .box9_circle {
  12.   width: 80px;
  13.   height: 80px;
  14.   background: #f09896;
  15.   border-radius: 100%;
  16. }
  18. .box9_circle:nth-child(2) {
  19.   width: 50px;
  20.   height: 50px;
  21. }

positionで上下左右中央寄せ

親となる要素にposition: relative;を指定し、子要素にposition: absolute;、top: 50%;、left: 50%;、transform: translate(-50%, -50%);を指定することで、子要素を上下左右の中央に配置することができます。

【サンプル】positionで1つの要素を上下左右中央寄せ

HTML
Copy
  1. <div class="box10">
  2.   <div class="box10_circle"></div>
  3. </div>
CSS
Copy
  1. .box10 {
  2.   position: relative;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }
  8. .box10_circle {
  9.   position: absolute;
  10.   top: 50%;
  11.   left: 50%;
  12.   transform: translate(-50%, -50%);
  13.   width: 80px;
  14.   height: 80px;
  15.   background: #f09896;
  16.   border-radius: 100%;
  17. }

positionで複数の要素を上下左右中央寄せ

positionで上下左右中央寄せした場合の特徴
  • positionで複数の要素を上下左右中央寄せした場合、要素同士が重なります。

【サンプル】positionで2つの要素を上下左右中央寄せ

HTML
Copy
  1. <div class="box10">
  2.   <div class="box10_circle"></div>
  3.   <div class="box10_circle"></div>
  4. </div>
CSS
Copy
  1. .box10 {
  2.   position: relative;
  3.   height: 200px;
  4.   padding: 1em;
  5.   border: solid 1px #f09896;
  6. }
  8. .box10_circle {
  9.   position: absolute;
  10.   top: 50%;
  11.   left: 50%;
  12.   transform: translate(-50%, -50%);
  13.   width: 80px;
  14.   height: 80px;
  15.   background: #f09896;
  16.   border-radius: 100%;
  17. }
  19. .box10_circle:nth-child(2) {
  20.   width: 50px;
  21.   height: 50px;
  22.   background: #fff;
  23. }

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-フロントエンド
-