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

Center vertically within several unknown height div's

我正在尝试获取这个:

--------------------
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" 页面,它似乎最适合我正在尝试的内容。

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

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

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

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

你想做什么?在你所附的图片上,你说所有的高度都是未知的,但在 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。