如何使用Flexbox居中图片？无需嵌套额外div可行吗？

你当前的问题是把Flex容器的属性（display: flex、align-items、justify-content）用在了图片本身上——这些属性是给父容器设置的，图片作为子元素不需要这些配置。下面给你两种可行的实现方案：

方案1：通过父容器<main>控制对齐 #

把<main>设置为Flex容器，通过容器的对齐属性让图片自动居中，同时还能灵活控制其他元素的排版：

body {
  font-family: sans-serif;
  font-size: 10vw;
  background-color: grey;
  word-wrap: break-word;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让所有子元素水平居中 */
  gap: 1.5rem; /* 可选：增加元素间距，优化排版 */
  padding: 0 1rem;
}

p {
  text-indent: 5vw;
  align-self: flex-start; /* 让段落保持左对齐，覆盖容器的居中设置 */
}

/* 保留你原有的媒体查询样式 */
p.Intro {
  /* See other colors @ media queries */
}

img.MainIMG {
  max-height: 50vh;
  max-width: 50vw;
}

如果希望标题也保持左对齐，给h1也加上align-self: flex-start即可。

方案2：单独给图片设置自动边距 #

如果不想改动父容器布局，直接给图片添加margin: 0 auto也能实现水平居中：

img.MainIMG {
  max-height: 50vh;
  max-width: 50vw;
  display: block; /* 图片默认是行内块，需设为块级才能生效auto边距 */
  margin: 2rem auto; /* 上下边距可自定义，左右auto实现水平居中 */
}

这种方式更轻量化，适合只需要图片单独居中的场景。

内容的提问来源于stack exchange，提问作者Neo Green