Css 与嵌套 div 垂直对齐

Question

此问题源于对

的修复建议

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

<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 垂直居中，间距相等（或没有）above/below，并且不出现垂直滚动条。

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 class:

margin-top: -5px;

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

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

Css 与嵌套 div 垂直对齐

Css vertical alignment with nested divs

css

vertical-alignment

border-box