有什么办法可以使display：table-row的单元格内容垂直居中吗？

Question

我认为这很容易，但我似乎无法做到这一点...

自the answer to another question of mine suggested this to solve the problem I outlined there and it does solve that problem起，我想坚持使用display:table。但是显然，解决一个问题应该创造出另一个...

这就是我现在拥有的：

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.center {
  /*What to put here??*/
}

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="center">
        Be vert centered
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>

如您所见，我有一排有两个单元格。预计右侧的单元格将比左侧的单元格高。因此，出于美学原因，我希望单元格的内容在左侧垂直居中：不像现在那样出现在行的顶部，而是出现在行的中间。有什么办法吗？

尝试失败：

1。 position:absolute + 50％的手动放置

如您所见，螺钉布局。

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.center {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}

<div class="table">
  <div class="row">
    <div class="cell" style="position:relative;">
      <div class="center">
        Be vert centered
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>

2。弹性框

好的，这需要设置display:flex，所以我必须添加另一个换行符div，因为一个元素不能同时为display:table-cell和flex。

如您所见，断然行不通。 centerwrapper拒绝拥有其父级的高度100%-其父级可能具有整个表行的高度，但是centerwrapper仍然具有其自身内容的高度。尽管height: 100%被忽略了。 （添加边框以使其可视化）

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.centerwrapper {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
}

<div class="table">
  <div class="row">
    <div class="cell" style="border: 1px solid black;">
      <div class="centerwrapper" style="border: 1px solid red;">
        <div class="center">
          Be vert centered
        </div>
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>

2.1有趣的观察

将height: 100%更改为height: 150px的螺钉布局。我不知道为什么。

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.centerwrapper {
  display: flex;
  height: 150px;
  flex-direction: column;
  justify-content: center;
}

<div class="table">
  <div class="row">
    <div class="cell" style="border: 1px solid black;">
      <div class="centerwrapper" style="border: 1px solid red;">
        <div class="center">
          Be vert centered
        </div>
      </div>
    </div>
    <div class="cell">
      Lorem ipsum dolor sit amet neque ante ipsum dolor in faucibus lectus feugiat sagittis vel, adipiscing gravida pulvinar felis, malesuada velit nulla sem vel wisi. Suspendisse fermentum, dui odio et netus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetuer adipiscing urna. Aliquam interdum ligula eleifend viverra. Mauris viverra justo.
    </div>
  </div>
</div>