用Flex垂直居中，设置高度，使用Align-items，还是不居中

Question

我已经阅读了这些技术，但一个半小时后我无法弄清楚出了什么问题。我缺职位了吗？为什么文字不垂直居中？

    .subscribe-btn {
        display: flex;
        margin: 0.5em;
        width: 290px;
        height: 50px;
        background-image: linear-gradient(#4968b0, #3d559e);
        border-radius: 20px;
        cursor: pointer;
        border-style: outset;
        justify-content: center;
        text-align: center;
    }

    .subscribe-btn a {
        font-weight: bold;
        font-size: 16px;
        color: white;
        text-decoration: none;
    }

<div class="subscribe-btn">
    <a href="https://www.bridgetodata.org/register">Subscribe to [WEBSITE NAME]</a>
</div>

我一直在父级和子级中使用对齐组合，尝试在父级和子级中使用不同的显示。

Answer 1

您需要

align-items: center;

而不是

justify-content

。

您可以摆脱 justify-content 因为您使用

text-align: center;

水平居中

Answer 2

需要添加align-items:center;

.subscribe-btn {
  display: flex;
  margin: 0.5em;
  width: 290px;
  height: 50px;
  background-image: linear-gradient(#4968b0, #3d559e);
  border-radius: 20px;
  cursor: pointer;
  border-style: outset;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.subscribe-btn a {
  font-weight: bold;
  font-size: 16px;
  color: white;
  text-decoration: none;
}

  <div class="subscribe-btn">
    <a href="https://www.bridgetodata.org/register">Subscribe to [WEBSITE NAME]</a>
</div>