垂直居中css答案

【问题标题】：Vertical centering css垂直居中css
【发布时间】：2012-12-29 14:39:57
【问题描述】：

给出的代码：

#wrapper_login {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background: black;
}

#login {
    z-index: 22;
    width: 300px;
    height: 400px;
    margin: -200px auto 0 auto;
    background: #000;
}

居中工作正常！问题是：如果窗口高度低于 400 像素，则完整的 #login 应该是可见且可滚动的。当前滚动条可见，但看不到完整的#login，滚动条只是不包含整个#login。

我认为这是因为绝对位置和负边距顶部，我也不知道如何改进代码，使其按应有的方式工作。

提前感谢您的帮助！

【问题讨论】：

标签： css vertical-alignment centering

【解决方案1】：

您的父容器#wrapper_login 应该有一个相对位置。和子容器#login绝对位置，以便在不同分辨率之间无缝工作。您可以使用 #login 的顶部和左侧值将其设置在正确的位置。

【讨论】：

【解决方案2】：

看起来像是媒体查询的工作

@media screen and (max-height: 400px) {
 #wrapper_login { position: static; }
 #login { margin: 0 auto; }
}

http://jsfiddle.net/95u9Q/2/

【讨论】：

太棒了！我的问题的完美解决方案:)