一般的な画像や文字を上下中央に寄せる方法といえば

**text-align: center;やmargin: 0 auto;**が有名ですよね。
しかし、それをしたのに、画像が上下中央真ん中に寄ってくれない、効かない。
一つ打つだけで、効く動作なのになぜか効かなくて困りましたが、解決できたので、ここに書こうと思います。

元のコード

<header>
  <div class="abc">
    <img  src=""  alt="" />
  </div>
</header>

header {
  background-color: #FFFF;
}

.abc{
  float: left;
  /* margin : 0 auto; */
  width:70%;
}

結論から言うと、text-align: center;の入れる場所とdivタグを消すことで直りました。

<header>
  <img  src=""  alt="" />
</header>

abcというdivタグを削除

header {
  text-align: center;
}

cssの部分もabcクラスhtmlから消したので、削除
CSSのヘッダーに**text-align: center;**
と直接書き込むことによって、解決することができました。
imgやdivタグに入れないように注意してください。

floatを使わない
floatはProgateなどを使っていると、教えてもらいますが、ややこしくなる原因で有名ですし、みんなも使っていないので、使わない方がいいです。
widthを定義しない
widthを一度定義してしまうと、他のwidthと差ができてしまって、空白の部分が出てきてしまいます。
なので積極的に、使わない方がいいです。