将div垂直居中于绝对定位的div顶部

Question

现在我有一个主体内容部分的网站。在这个正文内容部分，有一个绝对位于底部的元素，它与页脚之间有一点空间。

现在，我已经尝试了很多并且耗尽了我的思维能力，试图让我的身体内容的另一部分在绝对定位的底部元素和屏幕顶部之间垂直居中（在这种情况下）身体部分的顶部，因为还有一个标题）。

如果我使用表格单元格进行垂直对齐方法，那么问题是我的height : 100%选项在这里不起作用，因为内容实际上是在页眉和页脚之间居中但我需要它在页眉和页脚上方绝对定位的底部内容之间居中。

此处的评论还有一个演示链接：http://smartlights.azurewebsites.net/

进一步的扩展是因为这是一个响应式网站设计，所以底部绝对行实际上最终可能有两个可能的高度。这在CSS中是否可行，或者javascript肯定必须参与其中？

Answer 1

使用calc();

.center_div{
    height:calc(100% - 200px);
}

假设绝对div的高度为200px

Answer 2

您可以使用此方法将元素对齐到中心。

element{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:100px;
    height:100px;
    margin:auto;
}

这适用于垂直对齐中心。

element{
    position: absolute;
    top:0;
    bottom:0;
    height:100px;
    margin:auto 0;
}

Answer 3

您可以使用transform: translate垂直居中元素。

首先，将元素设置为position: absolute或position: relative，并使用top: 50%将其向下推至其父级高度的50％。像这样：

.vertical-align {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

现在，元素.vertical-align的顶部将与其父级的中间对齐。您现在需要做的就是将其自身高度的50％提高。如果您愿意，可以使用javascript完成此操作，但我真的很喜欢使用transform: translateY(-50%)。

.vertical-align {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  transform: translateY(-50%);
}

以下是此行动的一支笔：http://codepen.io/anon/pen/Ckyvz

以下是对3d转换的浏览器支持：http://caniuse.com/#feat=transforms3d

请记住在transform - 属性前加上常规浏览器供应商前缀。

玩得开心！