使用CSS居中对齐网页按钮的跨端适配方案咨询

问题描述 #

我一直在尝试将网站上的两个按钮居中对齐，但所有常用方法都没有生效，无论怎么调整按钮都不会移动，也不存在其他样式覆盖的情况，我可能遗漏了某些要点，这个问题十分令人困扰。

我的按钮CSS代码如下：

.btn {
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.btn-primary {
    background-color: #346cfc !important
}
.btn-secondary {
    background-color: #346cfc !important;
} 

我的HTML代码如下：

</nav>
<div class="heading">
<h1 class="display-5 title"></i>Ricky</h1>
<p class="subtitle">Ricky is a multi purpose bot with features like Music, Economy, Utility, and more!<br />Check out the <a href="https://docs.partywumpus.com">docs</a> or get started below.</p>
<a class="btn btn-primary btn-lg text-center" href="https://discord.com/oauth2/authorize?client_id=778817321640394762&scope=bot&permissions=2147483647" target="_blank" role="button">Invite</a>
<a class="btn btn-secondary btn-lg text-center" href="https://discord.gg/XXBpY2v6AU" target="_blank" role="button">Support Server</a>
<br /><br /><br /><br /><br /><br />

我找到了一种可行的方法：设置position: relative属性可以实现居中，但根据我设置的top和left百分比值不同，该方案在移动端的显示效果很差，对应代码如下：

.btn-primary {
  position: relative;
  top: 50%;
  left: 50%;
  background-color: #7289DA !important
} 

请问有没有更好的实现方案，可以避免PC端或移动端显示效果不佳的问题？

解决方案 #

你用position: relative配合百分比偏移的方案本身不具备响应式适配能力，偏移量是固定比例但不同设备的父容器宽度差异很大，自然会出现移动端错位的问题，下面是两种适配全端的可靠方案：

方案1：最简适配（仅需加1行代码）

按钮本身是行内块元素，直接给父容器.heading设置文本居中即可让内部的行内/行内块元素整体居中，全端自动适配：

.heading {
  text-align: center;
}

不需要修改现有其他代码，生效后两个按钮会横向并排居中，也不会影响内部其他文本的展示。

方案2：Flex布局（可控性更高）

如果需要灵活调整按钮的排列方向、间距，更推荐用Flex布局，天然支持响应式：

• 想要两个按钮横向并排居中：

.heading {
  display: flex;
  justify-content: center;
  gap: 20px; /* 调整两个按钮之间的间距 */
  flex-wrap: wrap; /* 移动端宽度不足时按钮自动换行，不会挤压变形 */
}

• 想要两个按钮纵向排列居中：

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* 调整两个按钮上下的间距 */
}

另外你给按钮加的text-center类只能控制按钮内部的文字居中，无法控制按钮本身的位置，之前设置不生效就是这个原因。

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