画像（img) を中央よせにする方法。インライン要素・ブロック要素の違いに注意。

CSSでimg真ん中に寄せる方法

CSSで画像（img要素）を中央に寄せて表示させる方法は、
寄せたい画像の外枠になる、div要素にtext-align : center
を付与するとうまくいきます。

imgを真ん中に配置
margin: auto; でブロック要素の中央配置
インライン要素・ブロック要素の違いに注意
CodePenはこちら
おすすめ教材

imgを真ん中に配置

今回の場合で、画像を真ん中に寄せたくて、imgに
text-align: center;　を記述しても、センターにはなりません。

わかりやすいように、外枠（inner)に赤枠の設定をしてます。

ＨＴＭＬ

<body>
  <div class="inner">
    <div class="contents">
      <img src="https://inopro.jpn.org/wp-content/uploads/2022/01/52561544f3c182f7cac2abbf6f3e53d0-e1643611955969.png" alt="">
      <div class="name">
        いのぷろ
      </div>
    </div>
  </div>
</body>

<body>

いのぷろ

</div>

</body>

ＣＳＳ

.inner {
max-width: 800px;
border: 2px solid red;
}
.contents img {
height: 300px;
width: 300px;
text-align: center;
border-radius: 50%;
}
.name {
font-size: 2rem;
font-weight: bold;
color: #000;
}

.inner {

max-width: 800px;

border: 2px solid red;

}

.contents img {

height: 300px;

width: 300px;

text-align: center;

border-radius: 50%;

}

.name {

font-size: 2rem;

font-weight: bold;

color: #000;

}

そこで、親要素にtext-align: center;を設定
すると真中によりました。

ＣＳＳ

.inner {
max-width: 800px;
border: 2px solid red;
}
.contents {
text-align: center;
}
.contents img {
height: 300px;
width: 300px;
border-radius: 50%;
}
.name {
font-size: 2rem;
font-weight: bold;
color: #000;
}

.inner {

max-width: 800px;

border: 2px solid red;

}

.contents {

text-align: center;

}

.contents img {

height: 300px;

width: 300px;

border-radius: 50%;

}

.name {

font-size: 2rem;

font-weight: bold;

color: #000;

}

こんな感じで、親要素にtext-align: center;を
設定で可能になります。

margin: auto; でブロック要素の中央配置

ブロック要素（div)を中央に配置する場合は、margin: auto;
でも設定可能です。

ＨＴＭＬ

<body>
  <div class="inner">
    <div class="contents">
      <img src="https://inopro.jpn.org/wp-content/uploads/2022/01/52561544f3c182f7cac2abbf6f3e53d0-e1643611955969.png" alt="">
      <div class="name">
        いのぷろ
      </div>
    </div>
  </div>
</body>

<body>

いのぷろ

</div>

</body>

ＣＳＳ

.inner {
max-width: 800px;
margin: auto;
border: 2px solid red;
}
.contents {
text-align: center;
}
.contents img {
height: 300px;
width: 300px;
border-radius: 50%;
}
.name {
font-size: 2rem;
font-weight: bold;
color: #000;
}

.inner {

max-width: 800px;

margin: auto;

border: 2px solid red;

}

.contents {

text-align: center;

}

.contents img {

height: 300px;

width: 300px;

border-radius: 50%;

}

.name {

font-size: 2rem;

font-weight: bold;

color: #000;

}

margin: auto;は　margin: 0 auto; になります。
これは、　上下のマージンが0で、左右のマージンは自動調整
の意味になります。

この方法でマージン設定してる場合、他の設定との関係で不具合が
ですこともあります。
そんな時は、margin-left: auto,margin-right: auto;で指定
する事でも真ん中よせが可能になります。

インライン要素・ブロック要素の違いに注意

中央寄せにしたい要素が、インライン要素・ブロック要素なのか
を理解する必要があります。

インライン要素・ブロック要素については下記の記事も参考にしてください。

外枠のdiv要素に幅と高さを設定して、外枠を作りましょう。
div要素は、初期状態では領域が設定されてません。
領域内に文字やほかの要素があると、その分に合わせて
高さが設定されて、幅は100％広がります。
場合に応じて、大きめのサイズで幅と高さを設定しましょう。

大きめの枠の中にある、小さい要素を真ん中によせる場合、
ブロック要素の幅100％のままでは、中央よせはうまくいきません。

中央によせたいブロック要素コンテンツに、
width: 70%; などと設定しましょう。

CodePenはこちら

<br /> See the Pen <a href="https://codepen.io/inopro/pen/xxPERYz"><br /> Untitled</a> by 井上 (<a href="https://codepen.io/inopro">@inopro</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />