无法使#image在父元素中居中的CSS布局问题求助

我没法让#image在父元素里居中，试过flexbox但没用。必须满足以下规则：

• 要有id为main的<main>元素
• #img-div、#image、#img-caption、#tribute-info和#tribute-link必须是#main的后代元素
• 要有id为title的非空元素
• 要有id为img-div的<figure>或<div>元素
• 要有id为image的<img>元素，且是#img-div的后代
• 要有id为img-caption的<figcaption>或<div>元素，是#img-div的后代且非空
• 要有id为tribute-info的非空元素
• 要有id为tribute-link的<a>元素，带href属性值，且target="_blank"
• <img>元素必须设置display: block
• #image要设置max-width: 100%、height: auto，且在父元素中居中

我试过加类、用flexbox的align-items和justify-content，要么代码出问题要么没变化，不知道哪错了。

原始代码 #

INDEX.HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Edgar Allan Poe</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Edgar Allan Poe</h1>
    </header>
    <main id="main">
   <div class="pic" id="img-div">
      <img  id="image" src="https://i.guim.co.uk/img/static/sys-images/Books/Pix/pictures/2009/1/19/1232367130592/Portrait-of-Edgar-Allan-P-001.jpg?width=465&dpr=1&s=none" alt="black and white portrait of Edgar Allan Poe" ><figcaption id="img-caption">Picture provided from The Guardian Website</figcaption>
    </div>
    
      <h2>A Man of Darkness</h2>
      <div id="tribute-info">
      <p>
        Edgar Allan Poe was well known for his dark and macabre literature. Stories filled with mystery and beautiful women of love. Stories filled with betrayal and death. Here is a list of his work:
      </p>
      <ul>
<li>Metzengerstein (1832)</li>
<li>A Tale of Jerusalem (1832)</li>
<li>Ms. Found in a Bottle (1833)</li>
<li>Shadow (1835)</li>
<li>Morella (1835)</li>
<li>Berenice (1835)</li>
<li>The Unparalleled Adventures of One Hans Pfaall (1835)</li>
<li>King Pest (1835)</li>
<li>Four Beasts in One - The Homo-Cameleopard (1836)</li>
<li>Ligeia (1838)</li>
<li>A Predicament (1838)</li>
<li>William Wilson (1839)</li>
<li>The Devil in the Belfry (1839)</li>
<li>The Journal of Julius Rodman (1840)</li>
<li>The Man of the Crowd (1840)</li>
<li>A Descent into the Maelstrom (1841)</li>
<li>Never Bet the Devil Your Head (1841)</li>
<li>The Pit and the Pendulum (1842)</li>
<li>The Masque of the Red Death (1842)</li>
<li>and more...</li>
      </ul>
     <h3> For a continued list of his works visit <a target="_blank" id="tribute-link" href="https://www.addall.com/books-in-order/edgar-allan-poe/"> ADDALL</a></h3>
      </div>
    </main>
  </body>
</html>

STYLES.CSS #

body {
  background-color: #ffe4e1;
}
.pic {
  background-color: #d8bfd8;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 3px;
  border: 2px solid black;
  display: block;
  align-items: center;
}
main {
  text-align: center;
}

h1, h2 {
  text-align: center;
  font-family: Cursive;
}

p{
  font-family: Sans-serif; 
}

ul {
  text-align: left;
}

你的图片居中逻辑其实没问题，但有两个关键小问题：

1. 父元素.pic（即#img-div）没有给图片留出足够的居中空间，也没设置内容居中规则
2. align-items: center是flex容器的属性，给<img>元素完全无效

下面提供两种简单的修复方式：

方式一：块级元素原生居中（无需flex） #

修改.pic的CSS，同时移除<img>上无效的align-items属性：

.pic {
  background-color: #d8bfd8;
  padding: 10px; /* 给容器加内边距，避免图片贴边 */
  text-align: center; /* 让figcaption也居中 */
}

img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 3px;
  border: 2px solid black;
  display: block;
  /* 删掉无效的align-items: center */
}

方式二：flexbox灵活居中 #

把.pic改成flex容器，垂直排列内部元素并水平居中：

.pic {
  background-color: #d8bfd8;
  display: flex;
  flex-direction: column; /* 让图片和标题垂直排列 */
  align-items: center; /* 水平居中所有子元素 */
  padding: 10px;
}

img {
  max-width: 100%;
  height: auto;
  padding: 3px;
  border: 2px solid black;
  display: block;
  /* 删掉align-items: center，同时可去掉margin:0 auto，flex已实现居中 */
}

修改后的完整CSS（以方式二为例） #

body {
  background-color: #ffe4e1;
}
.pic {
  background-color: #d8bfd8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

img {
  max-width: 100%;
  height: auto;
  padding: 3px;
  border: 2px solid black;
  display: block;
}
main {
  text-align: center;
}

h1, h2 {
  text-align: center;
  font-family: Cursive;
}

p{
  font-family: Sans-serif; 
}

ul {
  text-align: left;
}

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