Javascript 单击将一个div居中放置在另一个div下方

我试图在单击某个div时，以编程方式将一个div置于另一个div的下方。我什么都试过了，但是没有用，所以我需要一些帮助。下面是我写的代码。这是我尝试做的JSFIDLE链接

在.box2元素上使用位置：相对。另外，添加边距：0自动；将其水平放置在中心位置

这将减少用于定位元素的JS代码

函数TodoCtrl$scope{ $scope.show=false； $scope.do=functionevt{ $scope.show=！$scope.show； }; } .盒子{ 顶部：10px； 右：400px； 宽度：150px； 高度：150像素； 背景：橙色； 颜色：白色； z指数：10； 保证金：0自动； } .box2{ 位置：相对位置； 宽度：300px； 高度：150像素； 背景：绿色； 不透明度：1； z指数：9； 保证金：0自动； } .box2.ng-hide-add{ 过渡：全线性5.5s； } .box2.ng-hide{ 不透明度：0； } .box2{ 动画：向下滑动。5s； } @关键帧向下滑动{ 0% { 转化：translateY-20%； } 100% { 转化：转化率为0%； } } 待办事项 嘿，瑟尔

---

谢谢你的回答，但我正在尝试通过编程而不是css。我的最终目标是模仿Itunes播放列表，将音乐显示在几行网格中，然后当你单击某个艺术封面时，它会像一个div一样显示，并带有工具提示，其中包含该特定曲目的更多细节和操作。假设我在几行上显示了几个li元素，我想当我点击其中一个元素时，我会把绝对div放在点击li的底部，我想绝对div放在li的中心。

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <div class="box" ng-click="do($event)">
        <p> HEY THERRE </p>

    </div>
    <div class="box2" ng-show="show">

    </div>
  </div>
</div>

function TodoCtrl($scope) {
    $scope.show =false;

   $scope.do = function(evt) {   
        var $this = $(evt.target); 
        var offset = $this.offset();
        var width = $this.width();
        var height = $this.height();

        var centerX = offset.left ;
        var centerY = offset.top + height; 

       $('.box2').css({
            'position': 'absolute',
            'top': centerY,
            'left': centerX 
       });
        $scope.show = !$scope.show;

        console.log(evt);
        console.log(centerX, centerY);
    };
}