使用Flex垂直居中：设置高度与align-items仍无法居中的问题

问题出在你没给flex容器添加垂直对齐属性。你用了justify-content: center实现水平居中，但flex布局里控制垂直方向对齐的是align-items: center，加上这一行就能让文本垂直居中。

另外，text-align: center在这里其实多余——justify-content: center已经能让flex子元素水平居中，a标签作为行内元素在flex容器里会被当作flex项，直接受flex属性控制。

修改后的CSS代码如下：

.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;
  align-items: center; /* 新增这行实现垂直居中 */
}

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

不需要使用position属性，flex布局本身就能简洁实现居中效果。

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