如果高度太小，垂直居中元素并切换到顶部对齐答案

【问题标题】：Vertically center element and switch to align top if height is too small如果高度太小，垂直居中元素并切换到顶部对齐
【发布时间】：2012-04-21 21:59:48
【问题描述】：

我一直在试图找到答案，但我发现的只是在讨论垂直居中元素。

我想要做的是垂直居中一个 div，我知道如何用 css 来做。问题是如果高度太小，它仍然会居中并切断顶部和底部。

这是我的意思的演示：http://jsfiddle.net/reitermarkus/23B43/
全屏演示：http://fiddle.jshell.net/reitermarkus/23B43/show/light/

如果高度太小，你能告诉我如何将它与顶部对齐吗？最好不用JS。

谢谢你，
马库斯

【问题讨论】：

唯一可以确定高度是否低于所需最小值的方法是通过 JS。
我发现它适用于使用 max-height 的 CSS 媒体查询。

标签： css overflow center vertical-alignment

【解决方案1】：

您可能确定高度是否低于要求的最小值的唯一方法是通过 JS：

    var el = document.getElementById('id');   
    var el_height = el.offsetHeight;

    if(el_height < min_height){
    //apply class or inline style
    el.className = 'align_top';
    }

显然您需要定义 min_height 变量。此外，对于 DOM 操作，最好使用 jQuery。将元素与文档顶部对齐只是删除负边距并将'top'定义为0的情况;

【讨论】：

你好，谢谢你的回答，但其实不用JS也是有办法的。我不知道你可以使用最大高度的媒体查询，但它工作得很好。
啊，对不起，我以为你的意思是 div 的高度而不是浏览器视口。另外值得一提的是，媒体查询仅在现代浏览器中受支持，您仍然必须使用 JS 来实现向后兼容。