如何用CSS同时实现元素居中并消除Div造成的垂直间距？

核心思路 #

要同时实现链接居中、拉近与上方按钮的距离，关键是控制容器的内外间距+正确设置居中样式，以下是两种可靠的实现方式：

方式一：Flex布局居中（推荐） #

这种方式兼容性好，能稳定实现居中，同时消除不必要的间距：

/* 调整上方按钮容器的底部间距，拉近与下方链接的距离 */
.col-md-12 {
  margin-bottom: 8px; /* 可根据需求调整数值，默认可能是15px/20px */
}

/* 链接容器：实现居中+清除自身默认间距 */
.alignCenterButton {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin: 0; /* 清除容器自身的上下外边距 */
  padding: 0; /* 清除容器自身的内边距 */
}

/* 确保链接本身无额外间距 */
.alignCenterButton a {
  margin: 0;
}

方式二：文本对齐居中 #

如果习惯用text-align，同样可以实现，只需同步清除间距：

.col-md-12 {
  margin-bottom: 8px; /* 缩小上方容器的底部间距 */
}

.alignCenterButton {
  text-align: center; /* 文本居中，链接会继承此属性 */
  margin: 0;
  padding: 0;
}

排查注意点 #

如果之前用flex没生效，大概率是这两个原因：

• 容器alignCenterButton自身带有默认的margin/padding，导致视觉上没居中或间距过大
• 上方的.col-md-12容器带有较大的margin-bottom，需要手动调整

可以用浏览器开发者工具（F12）查看元素的盒模型，确认间距的来源，针对性调整数值。

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