Вертикально центр a div

У меня проблема с вертикальным центрированием простого div. Он всегда дает margin-top="0px"Вертикально центр a div

Вертикальное центрирование такое же, как и горизонтальное центрирование, и оно отлично работает.

(необходимо центрировать его в JavaScript для дальнейшей разработки)

Любые решения?

$(document).ready(function() { 
 
    var width1 = $("body").width(); 
 
    var width2 = $("#main").width(); 
 
    var height1 = $("body").height(); 
 
    var height2 = $("#main").height(); 
 
    var centerw = (width1 - width2)/2; 
 
    var centerh = (height1 - height2)/2; 
 
    $("#main").css("margin-left", centerw + "px"); 
 
    $("#main").css("margin-top", centerh + "px"); 
 
}); 
 
$(window).resize(function() { 
 
    var width1 = $("body").width(); 
 
    var width2 = $("#main").width(); 
 
    var height1 = $("body").height(); 
 
    var height2 = $("#main").height(); 
 
    var centerw = (width1 - width2)/2; 
 
    var centerh = (height1 - height2)/2; 
 
    $("#main").css("margin-left", centerw + "px"); 
 
    $("#main").css("margin-top", centerh + "px"); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    float: left; 
 
    width: 100%; 
 
    position: relative; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
#main { 
 
    width: 400px; 
 
    height: 600px; 
 
    background-color: gray; 
 
}

<body> 
 

 
    <div id="main"> 
 

 
    </div> 
 

 
</body>

источник

2015-09-15 DNA

Вы знаете, что можете передать объект ['.css()'] (http://api.jquery.com/css/#css-properties), следовательно, установив несколько значений CSS за один снимок, правильно? – D4V1D

Protip: 'margin-left: auto; margin-right: auto' будет центрировать блок. –

как вы разделяете 2 значения css при использовании нескольких? Как .css («margin-top», «value1», «margin-left», «value2»)? – DNA

В Chrome я не имел проблем с вашим кодом, только в Firefox не работает.

Проблема в том, что тело имеет ту же высоту, что и ящик, вы можете установить высоту для тела как 100% или использовать $ (window) .height(); вместо $ ("body"). Height();

JSFiddle

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
\t \t <script> 
 
\t \t \t $(document).ready(function() { 
 
\t \t \t var width1 = $(window).width(); 
 
\t \t \t var width2 = $("#main").width(); 
 
\t \t \t var height1 = $(window).height(); 
 
\t \t \t var height2 = $("#main").height(); 
 
\t \t \t var centerw = (width1 - width2)/2; 
 
\t \t \t var centerh = (height1 - height2)/2; 
 
\t \t \t console.log(width1+" " +width2 + " " + height1 + " " + height2); 
 
\t \t \t $("#main").css("margin-left", centerw + "px"); 
 
\t \t \t $("#main").css("margin-top", centerh + "px"); 
 
\t \t \t }); 
 
\t \t \t $(window).resize(function() { 
 
\t \t \t var width1 = $("body").width(); 
 
\t \t \t var width2 = $("#main").width(); 
 
\t \t \t var height1 = $("body").height(); 
 
\t \t \t var height2 = $("#main").height(); 
 
\t \t \t var centerw = (width1 - width2)/2; 
 
\t \t \t var centerh = (height1 - height2)/2; 
 
\t \t \t $("#main").css("margin-left", centerw + "px"); 
 
\t \t \t $("#main").css("margin-top", centerh + "px"); 
 
\t \t \t }); \t \t \t \t 
 
\t \t </script> 
 
\t \t 
 
\t \t <style> \t \t \t 
 
\t \t \t #main { 
 
\t \t \t width: 400px; 
 
\t \t \t height: 600px; 
 
\t \t \t background-color: gray; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t <div id="main"></div> 
 
\t </body> 
 
</html>

источник

2015-09-15 23:14:08

Я использую google chrome v45.0 и firefox v40.0, он не работает ни путем изменения «тела» на окно. – DNA

@DNA, проверьте это: http://jsfiddle.net/vz9ym7ef/4/ Он должен работать. Кроме того, вместо этого документ готов, используйте $ (window) .load .... Когда вам нужно рассчитать высоты/ширину элементов, вам нужен контент, загруженный, а не только DOM, чтобы быть готовым .... также, обратите внимание на удаление избыточного * селектора .... – sinisake

У вас в первой строке? В моем случае, без меня, это не сработает, так как это нормально. Но в хром мне не нужна эта линия. –

Вам не нужно Javascript для этого до тех пор, как вы знаете размеры вашей приставке.

#main { 
    height: 600px; 
    background-color: gray; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-top: -300px; 
    margin-left: -200px; 
    width: 400px; 
}

Это, как вы делаете свою математику:

маржу левый = -Width/2

маржи-топ = -высота/2

JSFIDDLE

Примечание : никогда не использовать * селектор в css, особенно если вы собираетесь применить 10 свойств, как в вашем ex достаточно

источник

2015-09-15 23:16:52

. Ширина и высота будут изменены позже для реагирования, и они будут в% на мобильном телефоне, поэтому я не могу самостоятельно выполнять математику, когда они меняют окно на мобильном телефоне, ( – DNA

), попробуйте адаптировать ваш javascript с помощью метода, который я объяснил здесь (скорректируйте поля), я уверен, что он будет работать в кросс-браузере. Кроме того, вместо четырех переменных вместо двух –

Даже если вы не знаете размеры вашего DIV, вы можете использовать это:

#main { 
    height: 60%; 
    width: 40%; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Это должно держать ваше содержание центрируется по вертикали и по горизонтали, независимо от того, какие размеры. Вы можете узнать больше об этом here.

источник

2015-10-27 20:28:46

Вертикально центр a div

ответ

Смежные вопросы