can't center my element which has fixed height in div in another wrapper div which has fixed height also

I know that centering a element in wrapper, if the element is block level element and the wrapper must have a fixed height div which contains the element must have a fixed height. But i have a button in a wrapper div which in another wrapper div. But cannot center it with {margin auto, 0px;}.

My Style

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

.food {
display: block;

height: 100px;


}

My 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