将DIV与垂直中心对齐到页面

时间:2013-09-22 18:03:59

标签: html5 html center vertical-alignment

好吧,我已经为此阅读了很多解决方案,但没有一个正常工作。

我不想将它对齐水平中心,它应该与垂直中心对齐,仅限于页面。显然,页面大小是动态的,DIV高度也是动态的。

我在 -

创建了一个jsfiddle

http://jsfiddle.net/yesprasoon/mukKB/

你可以在CSS中看到height: 200px;,它运作良好。但是如果div大小改变怎么办?

2 个答案:

答案 0 :(得分:1)

jQuery解决方案,这里是FIDDLE

$(function(){
   var wHgt = $(window).innerHeight(),
       lHgt = $('#loginForm').outerHeight();

   $('#loginForm').css({ top: wHgt/2 - lHgt/2 + 'px' });

   $(window).resize(function(){
      var wHgt = $(window).innerHeight(),
          lHgt = $('#loginForm').outerHeight();
      $('#loginForm').css({ top: wHgt/2 - lHgt/2 + 'px' });
  });
});

答案 1 :(得分:1)

纯CSS解决方案。

查看Working JSbin

HTML:(只添加了一个空的范围,评论很重要)

<span class="Centerer"></span><!--
--><div class="vertical-centre" id="loginForm">
    <form>
        <div id="welcometext2" style="text-align:center;"><b>Welcome to LC Inventory App</b>
        </div>
        <br />
        <input type="text" name="username" id="username" value="" placeholder="Username" />
        <input type="password" name="password" id="password" value="" placeholder="Password" />
        <input type="submit" value="Login" id="submitButton" />
    </form>
</div>

<强> CSS:

*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body
{
  height: 100%;
}
.vertical-centre
{
    padding: 0 15px;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}