当外部容器高度为100％时，将内容垂直对齐到中间

Question

所以我用ghost元素方法将内容垂直对齐到中间：

 html {height: 100% } body {min-width: 100% }
.block {
  text-align: center;
  height: 600px;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.centered {
  display: inline-block;
  vertical-align: middle;
}

这是一个简单的方法，我把内容放在中间，但我真的不想要任何固定的高度，我希望它是动态的。虽然我在代码示例中添加了高度：600px，因为它使它看起来工作但不是动态的。

当我添加一个固定的高度时，我会得到图片左侧的内容，但是当视口高度较小时我也希望它像右侧那样它会切割顶部和底部的空白空间，这可以'用固定的高度来完成。

所以任何其他有效的方法或解决方案都值得赞赏！ IE8的支持也很不错。

更新： https://jsfiddle.net/duthzvyo/ 当你挤压视口高度时不要使用滚动条，灰色框也可以这样说吧。

Answer 1

如果你想使用纯CSS（即不在当前设置中使用JavaScript动态编写宽度脚本），那么我建议使用更新的flex-box模型，它更强大。

查看一些tutorials on flex-box。

其他解决方案（可能是高级的，因为它们需要JavaScript编码，但如果您知道如何在JavaScript中编码，则更容易理解）包括Famo.us和（正在进行中）infamous。

另外，根据Cassowary Constraint Solvers查看以下内容：

https://gridstylesheets.org/

https://github.com/IjzerenHein/autolayout.js

最后两个库使得在动态布局中集中元素（以及其他内容）变得非常容易，您可以以类似于CSS的声明方式定义布局规则，但它们比传统CSS更好。我的拙见。

我建议您检查这些工具。 ：）