我似乎无法让 #image 在其父级中居中。我已经尝试过 Flexbox，但仍然不起作用

Answer 1

您的代码确实使图像居中（水平）。但无论如何，我会建议一些改进。

• 将图像和标题包装在

  figure

  元素中
• 然后你可以将它们放在一起

.pic {
  display: flex;
  justify-content: center;
  background-color: #d8bfd8;
}

figure {
  margin: 0;
}

<div class="pic">
  <figure>
    <img 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>Picture provided from The Guardian Website</figcaption>
  </figure>
</div>

如果您想让标题居中，请尝试以下操作：

figcaption {text-align: center;}