在几个未知高度div内垂直居中

Question

我正在尝试获取这个：

--------------------
Centered Header (Vert+Horizontally) - 15%
--------------------
Centered Image (Vert+Horizontally) - 50%
--------------------
Centered Description (Vert+Horizontally) - 35%
--------------------

每个都是总高度的百分比（15%、50%、35%），这是未知的，因为我有几个不同的按钮高度需要使用。

JSFiddle: http://jsfiddle.net/x3zq96d5/

我已经尝试了所有可以在网上找到的内容，包括 "Centering in the Unknown" 页面，它似乎最适合我正在尝试的内容。

每个解决方案都有严重的问题。我需要做什么才能让每个元素都在未知高度内居中？

Answer 1

您可以利用 display: table 和 display: table-cell CSS 规则来做到这一点。请参阅此处以获取更新的 Fiddle：http://jsfiddle.net/x3zq96d5/5/

为了完成这项工作，您在三个具有百分比高度的 div 中的每一个上设置 display: table 和 width: 100%。然后你需要在它们里面添加一个 child div，它们都有 display: table-cell，和 vertical-align: middle。使此 div 成为唯一的 child 有效地仅执行垂直对齐 - 然后您只需将内容添加到 child div 中，它就会按照您的意愿垂直对齐.

缺点是您必须以 child div 的形式添加没有语义意义的标记，但我认为这是一个很小的代价，并且是最简洁的方式实现你想要的。此外，您需要注意您的内容 - 在 Fiddle 中，您使用了 h4 和 p 标签，它们具有浏览器设置的默认 top/bottom 边距 - 如果此边距大于 space 在百分比高度 div 中可用，它会将内容推出垂直对齐。相当明显但值得注意。

Answer 2

你想做什么？在你所附的图片上，你说所有的高度都是未知的，但在 jsfiddle 中，你已经声明 .btn 的高度为 190px。

那么，您希望 parent 有多大？为了方便您自己，您应该声明具有 15%、50% 和 35% 高度的元素的 parent 的高度。在这种情况下，.btn 可以是百分比或固定值。作为百分比，

height:100%

请注意，如果您将 .btn 的高度设置为 100%，它将继承其 parent 的高度——即使它通常具有由其children的高度。当您将其高度声明为百分比时，它看起来是 parent 并成为它的百分比。（即高度为 50% 的 div 将是其 parent 高度的一半，其他都保持不变）。

如果您希望高度为浏览器的 100% window，您可以

html, body, ul, .tall, .btn {
    height:100%;
}

要使高度与浏览器一样高，您需要将高度声明为 100%，一直到 html。或者你可以设置一个固定的 .btn 高度，这样更容易

.btn {height:1000px}

现在，设置 children 个元素的高度，

btn-modal-header {
  height:15%;
}

.btn-modal-glyph {
  height: 50%;
}

.btn-modal-description {
  height: 35%;
}

这将使它们成为 parent 高度的给定百分比。

至于垂直居中，您需要用

声明 parent

display:table

及其 child

display:table-cell

它不一定是直接的 child，但这种方式更容易。所以你可以这样做：

.btn > * {
    display:table;
    width:100%;
}

.btn > * > * {
    display:table-cell;
    vertical-align:middle;
}

将身高 15%, 50%, and 35% 的 children 设置为 display:table 并将其 children 显示为 table-cells。然后，您只需将它们的垂直对齐方式设置为 middle。

Jsfiddle：http://jsfiddle.net/x3zq96d5/6/

请注意，如果您垂直调整浏览器的大小，高度现在将从 window 的大小继承，一直向下到 children。

在几个未知高度div内垂直居中

Center vertically within several unknown height div's

html

css

centering