Img HTML align = "middle" não está funcionando

Eu sou novo em HTML.

Portanto, essa pergunta pode ser muito fácil de responder.

Quero que uma imagem seja centralizada alinhada. O tamanho da imagem é fixo em pixels.

Então, o que eu quero é assim -

.

O que eu fiz é-

        <!DOCTYPE html>
<html>
<body>

    <img
        src="http://icons.iconarchive.com/icons/rokey/popo-emotions/128/big-smile-icon.png"
        width="42" height="42"
        align="middle"
        style="float: left;
          position: relative;
          display: block;
          margin-left: auto;
          margin-right: auto;
          z-index: 1;"
        >

</body>
</html>

Mas estou ficando-

Eu quero que seja responsivo.

Alguém pode me ajudar por favor?

Agradecimentos antecipados pela ajuda.

questionAnswers(6)

yourAnswerToTheQuestion