javascript - 使用 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);

我很想知道答案，但我也很想了解它背后的逻辑。

Answer 1

使用 jQuery 的 .css 函数，像这样:

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

不是很优雅，但它有效。其逻辑是通过定义其 top 和 left 属性将子容器置于相对于其父容器的 absolute 位置。

看看:http://jsfiddle.net/pE5QT/9/

PS:CSS 解决方案当然更适合这里，但是问题的标题是“使用 jQuery 将 div 在其父级中居中”，所以...