Question

我知道将元素置于包装器中心，如果元素是块级元素并且包装器必须具有包含元素的固定高度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;
}

这是一个codepen：http://codepen.io/anon/pen/wMWNoR

（使按钮宽度36像素和边距-18像素可能更安全，以避免半像素值。）

Answer 2

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

这就是你需要的：

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

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

以下是CODEPEN

中的代码

不能将具有固定高度的元素放在另一个具有固定高度的包装div中的div中心

2 个答案: