无法将next.js中的图像部分居中

import Image from 'next/image';

const CenteredImage = () => (
  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
    <Image src="/path/to/image.jpg" alt="Centered Image" width={500} height={300} />
  </div>
);

export default CenteredImage;

import Image from 'next/image';

const CenteredImage = () => (
  <div style={{ display: 'grid', placeItems: 'center', height: '100vh' }}>
    <Image src="/path/to/image.jpg" alt="Centered Image" width={500} height={300} />
  </div>
);

export default CenteredImage;

import Image from 'next/image';

const CenteredImage = () => (
  <div style={{ position: 'relative', height: '100vh' }}>
    <Image src="/path/to/image.jpg" alt="Centered Image" width={500} height={300} style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }} />
  </div>
);

export default CenteredImage;