Width and height change the alignment from center when utilizing Display flex

Question

Essentially I have a footer I'm making with a logo, border and the image - I am trying to change the size of the image and the footer itself but when using flex the image becomes left aligned (instead of centered) if I change the width or height at all.

<template>
  <div class="footer">
    <div class="logoFooter">
      <img src="Logo.png" alt="logo" />
    </div>
  </div>
</template>

.footer {
  display: flex;
  border-top-style: solid;
  border-color: #90caf9;
  flex: 1;
  background-color: #050c13;
}

.logoFooter {
  display: flex;
  justify-content: center;
}

img {
  max-width: 75%;
  max-height: 75%;
}

NOTE - I already attempted align self and justify self, but these as well do not work, I'm unsure at this point what the issue may be. Any suggestions on why this may be the case?