Использование jQuery для центрирования div внутри его родителя

Question

Я пытаюсь центрировать div с его родителем, вертикально и горизонтально.

JSFIDDLE: http://jsfiddle.net/pE5QT/

CSS:

.parent { 
    width: 200px; 
    height: 200px; 
    background-color:red; 
} 

.child { 
    height: 100px; 
    width: 100px; 
    background-color:yellow; 
} 

HTML:

<div class="parent"> b 
    <div class="child"> a </div> 
</div> 

Javascript:

var parent = $('.parent'); 
var parentDimensions = parent.height() * parent.width(); 

var child = $('.child'); 
var childDimensions = child.height() * child.width(); 

parent.html(); 
child.html(childDimensions); 

Я хотел бы ответ, но я бы также любят понимать логику этого. .css функция

Answer 1

Используйте Jquery», как это:

child.css({ 
    top: parent.height()/2 - child.height()/2 , 
    left: parent.width()/2 - child.width()/2 
}) ; 

Не очень элегантно, но он работает. Логика состоит в том, чтобы поместить ребенка в позицию absolute относительно его родительского контанера, определив его свойства top и left.

Посмотрите: http://jsfiddle.net/pE5QT/9/

PS: CSS решение, конечно, больше подходит здесь, но вопрос»название„Использование JQuery для центрирования DIV внутри своего родителя“, так что ...

Answer 2

Вам нужно отформатировать код, потому что он выглядит любопытным ... брутто.

В любом случае, так я и сделал бы это. В вашем ребенке CSS, вы можете сделать что-то вроде:

.child { 
    height: 100px; 
    width: 100px; 
    background-color:yellow; 

    margin-left: auto; 
    margin-right: auto; 
} 

А затем для вашего вертикального позиционирования:

child.css({'margin-top': (parent.height() - child.height())/2); 

Answer 3

Попробуйте этот код:

var parent = $('.parent'); 
var child = $('.child'); 

child.css("position","absolute"); 
child.css("top", ((parent.height() - child.outerHeight())/2) + parent.scrollTop() + "px"); 
child.css("left", ((parent.width() - child.outerWidth())/2) + parent.scrollLeft() + "px"); 

Вот рабочая демонстрация: http://jsfiddle.net/pE5QT/23/