Расчет высоты экрана и центрирования

Question

Я создаю новый сайт, используя Bootstrap и некоторые JQuery. Есть ли способ вычислить высоту экрана и центрировать div по вертикали в зависимости от высоты экрана? Я не привык к JQuery, но мне все равно удалось сделать что-то еще, но, пожалуйста, будьте нежны :-)

Answer 1

Вы можете использовать метод jquery .height() для расчета высоты окна.

Jquery код центрирования DIV в зависимости от высоты окна:

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 2

функция, которая реагирует на изменения высоты и ширины

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 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> 
...