为什么我的弹性项目（包含图像的图形）没有居中，但我的段落元素却居中？

Question

希望我标记的图像能够足够轻松地描述该问题。尽管上面的段落居中很好，但包含图像的红色边框图形并未居中。两个元素都位于同一个弹性盒容器中。看起来这个图形无论如何都不服从它的 Flexbox 父级。

HTML：

.stepDescriptionContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-style: solid;
  border-color: aqua;
  margin: 0px 0px;
  padding: 0px 0px;
}

.stepDescriptionContainer p {
  position: relative;
  margin: 0em 0em;
  padding: 0em 0em;
  text-align: center;
  font-size: 0.9rem;
  --fontOpticalSize: 23; /*Increase with increasing font size 8-144*/
  border-style: solid;
}

.stepImageFigure {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0px 0px;
  padding: 0em 0em;
  width: 500px;
  border-style: solid;
  border-color: rgb(255, 17, 0);
}

.stepDescriptionContainer img {
  object-fit: contain;
  width: 100%;
}

<div class="stepDescriptionContainer">
    <div class="triangle"></div>

    <p>We begin with carefully selected kiln-dried hardwoods, ensuring a precise 8% moisture content. This critical measure guarantees the stability and longevity of the final piece. Skilled craftsmen painstakingly inspect each plank; imperfections like deadwood in burls and edges are removed, unveiling nuanced details that enrich the final piece. This stage lays the foundation for the impeccable quality that defines our creations.</p>

    <figure class="stepImageFigure">
        <img src="..\images\Home\WalnutBlueEpoxyResinTable Part1.png" alt="">
    </figure>

</div>

您看不到的重要一点是上面的 CSS 位于媒体查询中，其中 stepImageFigure 从

position: absolute

到

position relative

。但我不明白这会如何导致问题。

我尝试过显示：网格，以及您能想象到的多种对齐和对齐的组合。重新整理 HTML 但没有成功，交叉检查了所有拼写。花了大约 5 个小时试图找到答案或替代方案。

期望图形居中并根据其 Flexbox 父级进行相应定位。

感谢您的帮助

Answer 1

如果添加 justify-content: center 和align-items: center，它将被放置到屏幕的中心位置。

.stepDescriptionContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; // here
  align-items: center;
  border-style: solid;
  border-color: aqua;
  margin: 0px 0px;
  padding: 0px 0px;
}