Cannot center my image on MyLayout.vue.

[StickyChannel92]

I need to center my image, so that I can have a personal 404 page using not-found.

Unfortunately, I tried every method on Google, but the image always never appears in the center:

Error1.vue:

<script setup>
import DefaultTheme from 'vitepress/theme';

const { Layout } = DefaultTheme;
</script>

<template>
  <Layout>
    <template #not-found>
      <br />
      <div>
        <img
          margin-left="auto"
          margin-right="auto"
          data-v-6c4a3ffe=""
          display="flex"
          justify-content="center"
          align-items="center"
          src="/assets/image/error.png"
          alt="Carl lying dead on the floor"
        />
      </div>
      <div data-v-6c4a3ffe="" data-v-98ddab3d="" class="NotFound">
        <p data-v-6c4a3ffe="" class="code">404</p>
        <h1 data-v-6c4a3ffe="" class="title">PAGE NOT FOUND</h1>
        <div data-v-6c4a3ffe="" class="divider"></div>
        <blockquote data-v-6c4a3ffe="" class="quote">
          It looks like you reached purgatory. There's nothing here! Make sure
          you typed/pasted the link correctly!
        </blockquote>
        <div data-v-6c4a3ffe="" class="action">
          <a data-v-6c4a3ffe="" class="link" href="/" aria-label="go to home">
            Take me home
          </a>
        </div>
        <div data-v-6c4a3ffe="" class="action">
          <a
            data-v-6c4a3ffe=""
            class="link"
            href="javascript:history.back()"
            aria-label="Go back"
          >
            Go back
          </a>
        </div>
      </div>
    </template>
  </Layout>
</template>

index.ts:

import DefaultTheme from 'vitepress/theme-without-fonts';
import Error1 from './Error1.vue';
import './my-fonts.css';

export default {
  extends: DefaultTheme,
  // override the Layout with a wrapper component that
  // injects the slots
  Layout: Error1,
};