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

我希望能得到答案，但同时也想要理解背后的逻辑。

- user1469270

Answer 1

使用jQuery的.css函数，如下所示：

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

不是很优美，但它能工作。逻辑是通过定义子元素的上下左右属性，将其放置在相对于父容器的绝对位置。

看一下这个：http://jsfiddle.net/pE5QT/9/ 顺便说一下：当然，CSS 解决方案在这里更合适，但问题的标题是“使用 jQuery 在其父级中央对齐一个 div”，所以...

- Ivan Chernykh

---

不要忘记在末尾加上 px。 - Brad

Answer 2

Try this code :

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/

- Nishu Tayal

Answer 3

你需要格式化你的代码，因为它看起来有点...丑陋。

无论如何，这是我会做的。在你的子CSS中，你可以这样做：

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

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

然后是垂直定位：

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

- Thanizer