如何将卡片内的Check Github按钮实现居中对齐

你尝试的属性不生效有两个核心问题：

1. align-items、justify-content是Flex布局的容器专属属性，需要先给对应父元素设置display: flex才会生效，你没给父容器加该属性自然无效。另外你写的item-align是拼写错误，正确属性名为align-items，justify-content:center:后面多写了冒号属于语法错误。
2. 按钮对应的<a>标签默认是行内元素，宽度由内容自动撑开，没有剩余空间分配给margin，直接设置margin-right: 50px只能调整右侧边距，无法实现居中。

方法1：父容器文本对齐（改动最小） #

如果接受父容器内所有内容都居中，直接给按钮所在的.col容器添加text-align: center属性即可，行内元素会跟随父元素的文本对齐规则居中：

.col {
  text-align: center;
  /* 原有.col的其他样式保留即可 */
}

方法2：按钮单独居中（不影响其他内容） #

给.btn新增属性，将其转为块级元素后用margin自动分配实现居中：

.btn {
  /* 原有样式全部保留，新增以下3行即可，原有margin-top、margin-bottom可删除 */
  display: block;
  width: fit-content; /* 也可自定义固定宽度，例如140px */
  margin: 10px auto;

  border-radius: 1rem;
  transition: all 0.5s;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  font-size: 16px;
  opacity: 85%;
  background-color: #ffc229;
  padding: 1rem 0.3rem;
}

方法3：Flex布局实现 #

给.col设置Flex布局规则，子元素纵向排列且居中：

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 原有.col的其他样式保留即可 */
}

如果不需要父容器内其他内容居中，可以单独给按钮套一层div父容器，只给该div添加上述Flex属性即可。

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