如何通过CSS实现按钮居中并解决移动端视图下的偏移问题？

首先看你当前的CSS代码，有几个明显的问题导致了按钮偏移：

问题分析 #

• 重复且错误的width属性：.container-bottomnav100-form-btn里同时写了width: 100%;和width: 60;，后者缺少单位（推测应该是60px），这会导致浏览器解析混乱，容器宽度不符合预期。
• 错误的margin居中方式：用margin-left: 50%; margin-right: 50%;来居中完全不合理，这会让容器的左右外边距各占50%，直接把容器挤到超出可视区域，自然会出现偏移。
• flex布局没有被正确利用：你已经给容器和按钮都加了flex属性，但没用到flex的原生居中能力，反而用了错误的margin方法。

修正后的CSS方案 #

我帮你调整了代码，利用flex布局的原生能力实现按钮居中，同时修复了无效的属性：

/* 容器样式：负责居中按钮 */
.container-bottomnav100-form-btn { 
  /* 若希望容器占满父元素宽度则保留width:100%，否则可根据需求调整 */
  width: 100%; 
  height: 60px; /* 补上缺失的单位 */
  display: flex; 
  /* 水平居中子元素（按钮） */
  justify-content: center;
  /* 若需要垂直居中按钮，添加这一行 */
  align-items: center;
  /* 移除错误的margin设置 */
} 

/* 按钮样式 */
.bottomnav100-form-btn { 
  font-family: Ubuntu-Bold; 
  font-size: 32px; 
  color: #fff; 
  line-height: 1.2; 
  text-transform: uppercase; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 0 20px; 
  width: 60px; 
  height: 60px; 
  background-color: #4881ec; 
  border-radius: 3px; 
  transition: all 0.4s; 
  /* 现代浏览器已支持标准属性，可移除厂商前缀简化代码 */
}

关键说明 #

1. flex居中原理：给容器设置display: flex; justify-content: center;就能让子元素（按钮）水平居中，如果需要垂直居中再加上align-items: center;，这是flex布局最可靠的居中方式，适配所有现代浏览器包括移动端Chrome。
2. 属性规范：所有长度值必须带单位（比如px），避免浏览器解析错误；去掉重复的属性声明，保持代码简洁。
3. 前缀优化：现在主流浏览器（包括Chrome移动端）都支持标准的flex和transition属性，不需要再写-webkit-、-moz-这类前缀，可以简化代码。

这样调整后，按钮在Chrome移动端视图里就能正常居中，不会出现偏移了。

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