Flex布局Div无法居中问题求助：修改flex-direction为column仍未解决

你的代码里有两个关键问题导致元素无法居中：

1. align-items 属性值错误：你写了 align-items: middle，但CSS中该属性没有这个有效值，合法值包括 center、flex-start、flex-end 等，所以这条样式未生效，子元素默认按 flex-start 对齐（靠左）。
2. 内层小flex容器同样存在 align-items: middle 的错误，会导致图标无法垂直居中。

修正要点 #

• 将外层flex容器的 align-items: middle 改为 align-items: center（flex列布局下，该属性控制子元素水平对齐）
• 将底部小flex容器的 align-items: middle 也改为 align-items: center

完整修正代码 #

<div style="margin-top:3rem; margin-bottom:3rem;">
  <div style="display: flex; flex-wrap: wrap; flex-direction: column; gap:0; justify-content: center; align-items: center; margin:0 auto; width:100%;">
    <div style="overflow: hidden; height: 30px; min-width: 369px; background-color: black; width:44%;">
      <p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:0.25rem;"><a href="#saljarinfo">Se säljarinfo</a></p>
    </div>
    <div style="overflow: hidden; height: 580px; min-width: 369px; background-color: white; width:44%;">
      <?php if ($isHex): ?>
      <iframe id="frame" scrolling="yes" src="https://web.sendify.se/tracking/<?= isset($_GET['t']) ? htmlspecialchars($_GET['t']) : '' ?>" style="border: 0px none; height: 680px; margin-top: -100px; width:100%;">
                </iframe>
      <?php else: ?>
      <div style="display: flex; justify-content: center; align-items: center; height:100%; width:100%;">
        <h2 style=" font-family: 'Neue Montreal Medium' , sans-serif; font-size:36px; text-align:center; padding:4rem;">
          <?= $felmeddelande ?? "Inget femeddelande har angivits." ?>
        </h2>
      </div>
      <?php endif; ?>
    </div>
    <div style="width: 44%; min-width:369px; background-color:black; height: 580px; padding: 8px 0px; text-align:center;">
      <h2 style="color:white; font-size:28px; font-family: 'Neue Montreal Medium', sans-serif; font-weight:500; margin:0; margin-top:10px; margin-bottom:0.5rem;">
        <a name="saljarinfo"></a>SÄLJARINFO</h2>
      <img src="<?= $bild ?? " " ?>" alt="Bild på säljaren!" style="width:180px; display:block; margin: 0 auto; border-radius:5px;">

      <h3 style="color:white; font-size:22px; margin:0; margin-top:0.5rem; font-family: 'Neue Montreal Book', sans-serif;">
        <?= $saljarNamn ?? "" ?>
      </h3>
      <p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Thin', sans-serif; letter-spacing:4px; font-size:16px;">
        <?= $roll ?? "" ?>
      </p>

      <div style='height:1px; background-color:white; margin-top: 1.5rem; margin-bottom: 1.5rem; '></div>
      <p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:0.25rem;">Tack för din order!</p>
      <p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:1.25rem;">Jag är med Er hela vägen - Från idé till färdigt projekt!</p>
      <p style="text-align:center; margin:0; color:white; font-family: 'Neue Montreal Book', sans-serif; letter-spacing:2px; font-size:16px; margin-bottom:0.75rem;">Behöver du komma i kontakt med mig?</p>

      <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap:1.5rem;">

        <a class="customClassHoverOverA" href="tel:<?= $telefon ?? " " ?>" title="Ring mig på <?= $telefon ?? " " ?>!"><i style="color:white; font-size:1.5rem;" class='fas fa-phone-alt'></i></a>

        <a class="customClassHoverOverA" href="mailto:<?= $epost ?? " " ?>" title="Skicka e-post till mig på <?= $epost ?? " " ?>!"><i style="color:white; font-size:1.5rem;" class='fas fa-mail-bulk'></i></a>

        <a class="customClassHoverOverA" href="<?= $id_kort ?? " " ?>" title="Mitt visitkort på <?= $id_kort ?? " " ?>!"><i style="color:white; font-size:1.5rem;" class='fas fa-id-card'></i></a>

      </div>
    </div>
  </div>
</div>

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