Html can'；t在另一个同样具有固定高度的包装器div中居中放置在div中具有固定高度的我的元素

我知道在包装器中居中一个元素，如果元素是块级元素，包装器必须有一个固定高度的div，其中包含的元素必须有一个固定高度。但是我在一个包装器div中有一个按钮，它在另一个包装器div中。但是不能将它与

{margin auto，0px；}居中。

我的风格

        .plusBtn
{
width: 35px;
height: 28px;
display: block;
margin-top: auto;
margin-bottom: auto;
}

.food {
display: block;

height: 100px;


}

我的html

 <div class="col-md-9 restlist" >
<div class="foodItem">
<div class="food">
<div class="plusBtn">
<button class="btn btn-success" type="button"><span class="glyphicon glyphicon-plus"></span></button></div>
</div>
</div>
</div>

---

您的显示应该是内联块，然后您可以通过将文本中心类添加到环绕按钮（其父级）的div中来居中显示。这是.plusBtn类。最后，修改垂直中心的类，最有效的方法是不实例化高度，而是使用填充来获得其中子级所需的高度

这就是您需要的：

 .food{
    width:100%;
    border:2px solid red;
    border-radius:10px;
    padding:27px 0 35px;
 }

 .plusBtn {
    width: 35px;
    height: 28px;
    display: inline-block;
 }

---

这是您在a

中的代码。如果您确实知道按钮的宽度和高度（这里就是这种情况），则相对容易：将其从顶部和左侧放置50%，然后将其向上和向左移动一半的高度和宽度（以像素为单位）：

.food {
  position: relative;
  height: 120px;
}
.plusBtn {
  width: 35px;
  height: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -14px;
  margin-left: -17.5px;
  text-align: center;
}

这是一个密码笔：

---

（可能更安全的做法是将按钮宽度设为36 px，左边距设为-18px，以避免半像素值。）

我知道相对定位可以解决问题，但随后响应度会中断。按钮确实位于父元素中。当将“左”值设置为0%时，它将从左向左流动。看到ss了吗，所以你想让它位于父元素的左边框，而不是水平中心？哦，不，我通过删除plusbtn的左边距值解决了这个问题。感谢您的回复：）您的解决方案很有魅力。：）如果你想把它放在左边的边框，就像你的照片一样，你也必须考虑边框的厚度。请看这里：