由于垂直居中，Div 在 Safari 中不可见答案

【问题标题】：Div not visible in Safari as a consequence from vertical centering由于垂直居中，Div 在 Safari 中不可见
【发布时间】：2013-10-21 18:58:10
【问题描述】：

我有一个简单的页面、一个容器 div 和一个标题 div。标题 div 包含在容器中（是的，我知道这不是命名的最佳选择，但这不是重点）。

两个 div 有一个固定的高度（最小高度）。我的目标是在浏览器窗口中获得一个垂直居中的页面。当浏览器窗口大于容器 div 高度时，我希望容器 div 在页面中垂直居中。当浏览器窗口小于容器 div 高度时，我希望页面顶部的容器 div 显示其包含的 div 标题。

我在这里的代码在 Firefox 上运行良好，但在 Safari 上存在问题：当浏览器窗口的高度小于内容高度时，标题 div 变得不可见。

请问，您知道解决此问题的方法是什么吗？小提琴是：http://fiddle.jshell.net/D4xWr/

代码；

<body>
<div id="container">
    <div id="header_title">
        TITLE
    </div>
</div>

css

 * {
padding:0; 
margin:0;}

html,body {
height:100%;
}

body {
font-family:Verdana, Geneva, sans-serif;
font-size:62.5%;
color:#734d08;
line-height:16px;
background-color:#00ffcc;
}


#container{
margin: auto;
position: absolute;
height:80%;
min-height:520px;
width:970px;
min-width:970px;
top: 0; left: 0; bottom: 0; right: 0;
background-color:#00ffcc;
border:1px solid red;
    }

#header_title{
background-color:white;
height:70px;
min-height:70px;
width:100%;
border:1px solid;
}

【问题讨论】：

标签： html css safari

【解决方案1】：

问题在于垂直居中技巧在 Safari（以及 Chrome 和 IE）中效果很好。一种解决方案是在 CSS 中添加一个媒体查询，以防止在较小的屏幕上使用此技巧。

@media screen and (max-height:520px) {
    #container {bottom:auto}
}

见updated fiddle。

【讨论】：

虽然几分钟前受到stackoverflow.com/questions/10925852/… 此处给出的答案的启发，我显然已经解决了改变位置的问题：相对而言，我已经检查了您的解决方案并且它也可以。我不知道哪个更好，但对我来说没关系。谢谢。
在这种特定情况下，我会说更好的解决方案是在两个地方没有高度 520px 的解决方案。因为当你在一个地方改变这个高度时，你必须记住在另一个地方也改变它。