html - 无法将我在 div 中具有固定高度的元素居中在另一个具有固定高度的包装 div 中

Question

我知道在包装器中居中元素，如果元素是 block 级元素并且包装器必须有一个固定高度的 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>

My Screenshot about the issue

Answer 1

如果您知道按钮的宽度和高度(这里就是这种情况)，这就相对容易了:将它定位在距顶部和左侧 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;
}

这是一个代码笔:http://codepen.io/anon/pen/wMWNoR

(将按钮宽度设为 36 px 和 margin-left -18px 以避免半像素值可能更安全。)