html - 会显示: table work if the container is set in vh not pixels or percent

Question

我有一个 slider ，它总是在

.main-slider { position: relative; z-index: 10; height: calc(100vh - 165px); margin: 0 0 60px 0; }

.main-slider .item { height: calc(100vh - 165px); width: 100%; background-position: top; background-repeat: no-repeat; background-size: cover !important}

我正在尝试设置一个简单的设置语义 div 来按住按钮并显示垂直居中。

<div class="something-semantic">
   <div class="something-else-semantic">
   Unknown stuff to be centered.
   </div>
</div>

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

我遇到的只是文本居中居中，而不是垂直居中。

有什么建议吗？

如果您更喜欢使用开发人员工具，可以在 http://9-web-studio.myshopify.com/ 找到该站点并使用密码“alan”查看商店。

我们将不胜感激。

Answer 1

是的，这行得通，问题是第一个 div 缺少 100% 的高度