Question

我正在使用Bootstrap和一些Jquery构建一个新网站。有没有办法计算屏幕高度并根据屏幕高度垂直居中div？我不习惯Jquery，但无论如何都设法做了其他的东西，但请保持温柔： - ）

Answer 1

对高度和宽度变化做出反应的功能

<强> HTML：

<div id="mydiv1">
   <div id="mydiv2">
       <p>Middle of Middle :)</p>
   </div>
</div>

js jquery

它也可能是编程中的一个功能但我觉得时间更清楚了

function SetWidthAndHeight(getelement) {
    var winH = $(window).height();
    var winW = $(window).width();
    getelement.css('top', winH / 2 - getelement.height() / 2);
    getelement.css('left', winW / 2 - getelement.width() / 2);
}
function SetCenterOfAreDiv(ele,from) {
    var winH = from.height();
    var winW = from.width();
    ele.css('top', winH / 2 - ele.height() / 2);
    ele.css('left', winW / 2 - ele.width() / 2);
}
$(function () {
    // on change orientation
    window.addEventListener("orientationchange", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
    // on change resize
    window.addEventListener("resize", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
});

SetWidthAndHeight($('#mydiv1'));
SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));

<强> CSS

#mydiv1 {
    height:100px;
    width:80%;
    background-color:green;
    position:absolute;
}
#mydiv2 {
    height:50px;
    width:30%;
    background-color:blue;
    position:absolute;
    text-align:center;
    color:#FFF;
}

这里现场演示： http://jsfiddle.net/A7PWR/

Answer 2

您可以使用jquery .height()方法计算窗口高度。

根据窗口高度居中div的Jquery代码：

    var winH = $(window).height(); //-- For calculate window height 
    var winW = $(window).width(); //-- For calculate window width
    $('#MyDiv').css('top', winH / 2 - $('#MyDiv').height() / 2); //-- For centering div according to window height
    $('#MyDiv').css('left', winW / 2 - $('#MyDiv').width() / 2); //-- For centering div according to window width

Answer 3

如果您已经知道元素的高度，那么它只是CSS：

.element {
  position: absolute;
  top: 50%; left: 50%;
  width: 500px;
  height: 500px;
  margin: -250px 0 0 -250px;
  background: #FFF;
}

如果您不知道元素的宽度和高度。你可以将它与一些javascript结合起来。

var $element = $('.element');

$element.css({
  marginTop: 0 - Math.round( $element.height() / 2 ),
  marginLeft: 0 - Math.round( $element.width() / 2 )
});

希望有所帮助：）

Answer 4

如果您要做的就是将div放在屏幕中央，那么您不需要jQuery / JavaScript来完成它。请改用CSS。它更好，更快，并且在动态定位时你不会（可能）看到元素的“逐像素”“机器人”运动。以下是使用CSS的方法：

.centerBox {
  position: absolute;
  width: 300px;
  height: 4000px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -150px;
}

那么你就这样使用它：

...
<div class="centerBox"> bla bla bla </div>
...

计算屏幕高度和居中

4 个答案: