Question

建议的修复

我有3个嵌套的div：outer，inner和item。

<div class="outer">
  <div class="inner"><div class="item"></div></div>
</div>

给出以下基本CSS：

.outer{
  width:50%;
  height:100px;
  border: 1px solid red;
  position:relative;
  overflow-x:hidden;
  box-sizing:border-box;
}
.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
  line-height:98px;
}
.item{
  width:100px;
  height:94px;
  background-color:yellow;
  display: inline-block;
  border:1px solid green;
  box-sizing:border-box;
  vertical-align:middle;
}

挑战在于将'item'div垂直居中，在上方/下方有相同（或没有）的间隙，并且不会出现垂直滚动条。

Codepen here

更新

如下所述，我应该补充说，不同高度的多个项目必须居中。到目前为止，最佳答案是为每个项目添加一个负边距，从而产生以下结果：http://codepen.io/anon/pen/dYWEYZ

然而，这对我来说闻起来很糟糕，因为它需要一个取决于其他3个属性的偏移量。

Answer 1

如果使用flexbox，很容易实现：

.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
  line-height:98px;
  display:flex;
  align-items:center;
}

Answer 2

您可以使用display: table-cell;来获得所需的垂直居中：

.outer{
  width:50%;
  height:100px;
  border: 1px solid red;
  position:relative;
  overflow-x:hidden;
  box-sizing:border-box;
}
.inner{
  border:1px solid blue;
  height:100%;
  position: absolute;
  box-sizing: border-box;
  line-height:98px;
  display: table; //must change this as well
}
.item{
  width:100px;
  height:94px;
  background-color:yellow;
  border:1px solid green;
  box-sizing:border-box;
  vertical-align:middle;
  display:table-cell; //update display type
}

Answer 3

简单的解决方案是http://codepen.io/anon/pen/jbmRjo

将其添加到.item类：

margin-top: -5px;

这是因为你的外部类和内部类的边界，以及内部类的行高。如果使边框为2px而不是1px，则边距顶部变为-9px。如果您将边框保留为1px并使线高96px，则边距顶部变为-3px。

那么为什么你不能使用负利润率呢？

与嵌套div的Css垂直对齐

3 个答案: