与嵌套 div 的 Css 垂直对齐

Question

这个问题是由this related question建议的修复引起的

我有 3 个嵌套的 div：外部、内部和项目。

<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;
}

挑战是将“项目”div 垂直居中，上下有相等（或没有）间隙，并且不出现垂直滚动条。

Codepen here

更新：

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

但是，这闻起来很糟糕（对我来说），因为它需要一个依赖于其他 3 个属性的偏移量。

Answer 1

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

将此添加到您的 .item 类中：

margin-top: -5px;

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

那么为什么不能使用负边距顶部呢？

Answer 2

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

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

Answer 3

您可以使用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
}