javascript - 集中 div，没有幻数

Question

我的html有问题。我有这个基本的 HTML 登录页面：

<section>
    <form id="" name="" method="post" action="">
        <label for="username">User:</label>
        <input type="text" id="username" name="username" />
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
        <input type="submit" id="login" name="login" value="Entrar" />
    </form>
</section>

问题是，如何在页面中水平和垂直地集中这个部分，具有固定的宽度，但是，高度自动独立于内容？

CSS 示例：

section { width: 300px; }

如果仅使用 CSS 无法实现，则可以使用 jQuery。

score 4 · Accepted Answer

使用 jQuery 你可以做到这一点

获取窗口的高度
section减去要居中的元素的高度。
将该值分成两半。
使section元素的边距顶部为该最终数字。

像这样：

var ht = $(window).height();
var sectionHt = $('section').height();
var pad = (ht - sectionHt)/2;

$('section').css('margin-top',pad);

例如：http: //jsfiddle.net/JMC_Creative/8RpQZ/

或者，如果您希望它在调整窗口大小时保持居中，您可以执行相同的操作，但将其包装在$(window).resize()jQuery 方法中。像这样：

$(window).resize(function(){
    var ht = $(window).height();
    var sectionHt = $('section').height();
    var pad = (ht - sectionHt)/2;

    $('section').css('margin-top',pad);
});

score 1 · Accepted Answer

<section>
    <form id="" name="" method="post" action="">
        <label for="username">User:</label>
        <input type="text" id="username" name="username" />
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
        <input type="submit" id="login" name="login" value="Entrar" />
    </form>
</section>

section {
    width: 300px;
    height: auto;
    margin: 0 auto;
    position: relative;
    top: 250px; /* pixels from top of page - if you have the height to be auto, may see different changes, however, this could be what you want if you want the form to be in the exact center -- simply change the px's to suit your needs */
}

这是你要问的吗？演示：http: //jsfiddle.net/zyFG5/

编辑：

好的，试一试：

<section>
    <form id="" name="" method="post" action="">
        <label for="username">User:</label>
        <input type="text" id="username" name="username" />
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" />
        <input type="submit" id="login" name="login" value="Entrar" />
    </form>
</section>

section {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
}

负边距正好是高度和宽度的一半，它将元素拉回到完美的中心。仅适用于固定高度/宽度的元素。

演示：http: //jsfiddle.net/DDZmY/

score 0 · Accepted Answer

使用 jquery：

$(function(){
    var height = $(window).height();
    var width = $(window).width();

    var blockHeight = $(".block").height();
    var blockWidth = $(".block").width();

    var paddingTop = (height/2 - blockHeight);
    var paddingWidth = (width/2 - blockWidth);

    $(".block").css({
        'padding-top':paddingTop,
        'padding-left':paddingWidth
     });
});

http://jsfiddle.net/zyFG5/2/

score 0 · Accepted Answer

一点css可以帮助你实现你所追求的。虽然可能需要一些调整才能得到你想要的东西。

将您的部分设置为相对位置，以便您可以垂直对齐它。然后设置一个自动左/右边距，使其水平居中......

section{position:relative;top:200px;
  margin:auto;
  width:300px;
  border:2px outset #0af;
  text-align:right;
  background-color:#fff;
  padding:6px;
}

另一种方式有点hacky，但似乎工作正常。您创建一个高度为 100% 的 div（并且这将是不可见的）并将您的部分垂直对齐。

这是你可以分叉的东西...... http://codepen.io/lukeocom/pen/Dmdnh

javascript - 集中 div，没有幻数

4 回答 4

Related

Reference