如何在移动视图 CSS 中居中按钮而不偏离中心？答案

【问题标题】：How can center button without being off center in mobile view CSS?如何在移动视图 CSS 中居中按钮而不偏离中心？
【发布时间】：2021-09-19 11:52:23
【问题描述】：

我有 div 的 css 按钮和类，我如何将其居中，因为在 chrome 移动视图检查器中它偏离了中心。

.container-bottomnav100-form-btn {
  width: 100%;
  width: 60;
  height: 60;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-left: 50%;
  margin-right: 50%;
} 

.bottomnav100-form-btn {
  font-family: Ubuntu-Bold;
  font-size: 32px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 60px;
  height: 60px;
  background-color: #4881ec;
  border-radius: 3px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

我将 margin-left 和 margin-right 设置为 50%，但正如所说的移动视图其偏离中心。

【问题讨论】：

试试margin: auto
嗨，欢迎来到 SO。请先拨打tour。然后阅读how to ask questions here。之后编辑问题以符合指南并提供minimal reproducible example 以获取调试详细信息。要特别注意最小化和可重复性。单独的 CSS 是不可重现的。
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： html css

【解决方案1】：

为了使 flex 容器居中，移除水平边距并使用 css 属性 justify-content: center;

使用以下代码更新您的 CSS

.container-bottomnav100-form-btn {
  width: 100%;
  width: 60;
  height: 60;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
} 

.bottomnav100-form-btn {
  font-family: Ubuntu-Bold;
  font-size: 32px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: auto;
  height: 60px;
  background-color: #4881ec;
  border-radius: 3px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

【讨论】：