Html 按钮未在CSS中居中

我已经创建了一个div容器，其中有一个div框。在盒子里，我有一个按钮，应该在盒子底部居中

我到处搜索，在任何人做“复制帖子”之前，我已经尝试了他们所说的一切。例如，在我的代码中添加一个“display:block；”等等，但它仍然没有将按钮居中。我一直在胡思乱想我能想到的尝试和中心按钮，但没有任何工作

.container{
最大宽度：80%；
保证金：自动；
溢出：隐藏；
背景色：#fff000；
}
.框-1{
背景图片：url（）；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
边框：实心#000 1px；
利润率：10px；
填充：10px；
宽度：30%；
高度：260px；
转变：转变；
溢出：隐藏；
位置：相对位置；
}
#主按钮{
位置：绝对位置；
底部：0；
填充：7px 5px；
保证金：0自动；
宽度：40%；
边缘底部：15px！重要；
显示：块；
溢出：隐藏；
颜色：#fff；
背景色：#000；
边框：2倍实心#fff；
字体家族：继承；
不透明度：0；
过渡：.5s；
}
.box-1：悬停#主按钮{
不透明度：1；
颜色：#fff；
背景色：#000；
边框：2倍实心#fff；
字体家族：继承；
光标：指针；
}

这是因为按钮的父项是链接标签。您的按钮不是flexbox的直接子按钮

在mainButton CSS上正确设置这三个值可以解决您的问题：

width: 40%;
left:50%;
margin-left:-20%;

关键是要注意这里的计算是什么。left属性将项目居中于页面的50%，左边的负边距将根据其宽度偏移项目位置。因为它的宽度是40%，负边缘必须是这个的一半，即20%。考虑到这一点，如果您的设计发生变化，您可以调整宽度和偏移，但更好的是使用css变量和calc（）意味着您可以只设置宽度，而边距将自行计算

例如：

left:50%;
--buttonWidth: 40%;
width: var(--buttonWidth);
margin-left:calc( var(--buttonWidth) / -2);

.container{
最大宽度：80%；
保证金：自动；
溢出：隐藏；
背景色：#fff000；
}
.框-1{
背景图片：url（）；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
边框：实心#000 1px；
利润率：10px；
填充：10px；
宽度：30%；
高度：260px；
转变：转变；
溢出：隐藏；
位置：相对位置；
}
#主按钮{
位置：绝对位置；
底部：0；
填充：7px 5px；
宽度：40%；
左：50%；
左边缘：-20%；
边缘底部：15px！重要；
显示：块；
溢出：隐藏；
颜色：#fff；
背景色：#000；
边框：2倍实心#fff；
字体家族：继承；
不透明度：0；
过渡：.5s；
}
.box-1：悬停#主按钮{
不透明度：1；
颜色：#fff；
背景色：#000；
边框：2倍实心#fff；
字体家族：继承；
光标：指针；
}

---

尝试使用此代码，我认为这将有助于您解决问题

.container {
  max-width: 80%;
  margin: auto;
  overflow: hidden;
  background-color: #fff000;
}

.box-1 {
  background-image: url();
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: solid #000 1px;
  margin: 10px;
  padding: 10px;
  width: 30%;
  height: 260px;
  transition: transform .5s;
  overflow: hidden;
  position: relative;

}

#mainButton {
  position: absolute;
  padding: 5px;
  width: 60%;
  margin-bottom: 15px !important;
  display: block;
  overflow: hidden;
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
  font-family: inherit;
  opacity: 0;
  transition: .5s;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box-1:hover #mainButton {
  opacity: 1;
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
  font-family: inherit;
  cursor: pointer;
}

只需在#main按钮中添加“left:0；right:0；”

.container{
最大宽度：80%；
保证金：自动；
溢出：隐藏；
背景色：#fff000；
}
.框-1{
背景图片：url（）；
背景位置：中心；
背景尺寸：封面；
背景重复：无重复；
边框：实心#000 1px；
利润率：10px；
填充：10px；
宽度：30%；
高度：260px；
转变：转变；
溢出：隐藏；
位置：相对位置；
}
#主按钮{
位置：绝对位置；
底部：0；
填充：7px 5px；
保证金：0自动；
宽度：40%；
边缘底部：15px！重要；
显示：块；
溢出：隐藏；
颜色：#fff；
背景色：#000；
边框：2倍实心#fff；
字体家族：继承；
不透明度：0；
过渡：.5s；
左：0px；
右：0px；
}
.box-1：悬停#主按钮{
不透明度：1；
颜色：#fff；
背景色：#000；
边框：2倍实心#fff；
字体家族：继承；
光标：指针；
}

尝试向左设置：30%；在#mainButton@phucnh非常感谢你！！成功了！！介意我问你为什么用30%吗？我还在学习。我正在为自己创建一个网站，让自己变得更好：）100%/2+30%/2=30%。100%/2->1/2容器宽度30%/2->1/2按钮的宽度是否与编码方式有关，只要它在做您希望它做的事情？我相信如果一个有经验的开发人员看了我的代码，他们可能会用几行代码来完成我的工作！你需要更多的时间：））什么意思？@Adam你必须删除标签。将其替换为按钮子级。