移动端Calculate按钮居中对齐问题求助（纯CSS开发）

问题根源分析 #

你的代码里有两个关键问题导致按钮在移动端偏移：

• .btn 中设置了固定的 margin-left: 127px，这个值在小屏幕上会强制按钮向右偏移，完全破坏居中布局。
• align-items: center 是Flex布局专属属性，但你没给父容器 .calculate-button 设置 display: flex，所以这个属性根本不起作用。

修改后的CSS代码 #

.calculate-button {
  width: 50%;
  margin: 20px 0;
  /* 添加Flex布局，让子元素水平居中 */
  display: flex;
  justify-content: center;
}

.btn {
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  padding: 10px;
  border-radius: 7px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  color: white;
  background-color: #7e1c1c;
  /* 删掉固定的margin-left */
  outline: none;
  border: 0;
  /* 按钮内部文字居中用text-align即可 */
  text-align: center;
}

.btn:hover {
  background-color: rgb(185, 23, 23);
  color: white;
}

关键修改说明 #

1. 移除 .btn 的 margin-left: 127px：固定像素边距是响应式布局的大忌，会在不同屏幕尺寸下布局错乱。
2. 给 .calculate-button 添加 display: flex 和 justify-content: center：启用Flex布局后，justify-content: center 可以让子元素（按钮）在父容器内水平居中，完美适配各种屏幕宽度。
3. 保留 .btn 的 text-align: center：确保按钮内部的文字居中显示，和容器的居中布局互不冲突。

HTML部分不需要修改，保持原结构即可。这样修改后，按钮在移动端就能正常居中了。

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