垂直居中在几个未知高度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/

我已经尝试了我能在网上找到的所有内容，包括“在未知中心”页面，它似乎最适合我正在尝试的内容。

每个解决方案都有可怕的破碎。 我需要做些什么才能让这些元素在未知高度中居中？

Answer 1

您可以使用display: table和display: table-cell CSS规则来完成此操作。 在这里查看更新的小提琴： http ： //jsfiddle.net/x3zq96d5/5/

要使其工作，请在具有百分比高度的三个div中的每一个上设置display: table和width: 100% 。 然后，您需要在其中添加一个子div，其中包含display: table-cell和vertical-align: middle 。 使这个div成为唯一的孩子有效地只执行垂直对齐 - 然后你只需要在子div中添加你的内容，它将根据你的意愿垂直对齐。

缺点是你必须以没有语义含义的子div的形式添加标记，但我认为这是一个很小的代价，是实现你喜欢的最好的方式。 此外，您需要注意您的内容 - 在您使用h4和p标签的小提琴中，并且这些标签具有浏览器设置的默认顶部/底部边距 - 如果此边距大于百分比高度div中的可用空间，它会将内容推出垂直对齐。 相当明显，但值得注意。

Answer 2

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

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

height:100%

请注意，如果将.btn的高度设置为100％，它将从其父级继承其高度 - 即使它通常具有由其子级的高度定义的高度。 当您将其高度声明为百分比时，它会查看它的父级并成为其百分比。 （即，高度为50％的div将是其父级的一半高，其他所有保持不变）。

如果您希望高度为浏览器窗口的100％，您可以这样做

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

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

.btn {height:1000px}

现在，设置子元素的高度，

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

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

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

这将使它们成为父母身高的给定百分比。

至于垂直居中，您需要声明父级

display:table

和它的孩子

display:table-cell

它不一定是直接的孩子，但这样更容易。 所以你可以这样做：

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

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

它将孩子设置为15%, 50%, and 35%高度来display:table及其子项显示为table-cell 。 然后，您只需将垂直对齐设置为middle 。

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

请注意，如果您垂直调整浏览器的大小，现在将从窗口大小继续高度，一直到子节点。