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

给出的代码:

http://jsfiddle.net/95u9Q/

#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/

      【讨论】:

      • 太棒了!我的问题的完美解决方案:)
      猜你喜欢
      • 2014-02-27
      • 1970-01-01
      • 2014-10-22
      • 1970-01-01
      • 2012-04-26
      • 2018-05-17
      • 1970-01-01
      • 1970-01-01
      • 2012-02-05
      相关资源
      最近更新 更多