Javascript 尝试设置数据包模板在页面的中间打开

我正在使用他们的datepicker弹出模板在我的应用程序中选择日期

我有一个问题，使弹出窗口在我贴花的图标正下方的行中心打开，点击应该打开它

这是我目前的模板：

angular.module("template/datepicker/popup.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/datepicker/popup.html",
    "<ul class=\"dropdown-menu\" ng-style=\"{display: (isOpen && 'block') || 'none', top: position.top+'px', right: position.right+'520px'}\" class=\"dropdown-menu\">\n" +
    "   <li ng-transclude></li>\n" +
    "   <li class=\"divider\"></li>\n" +
    "   <li style=\"padding: 0px;\">\n" +
    "       <span class=\"btn-group\">\n" +
    "           <button class=\"btn btn-small btn-inverse\" ng-click=\"today()\">today</button>\n" +
    "       </span>\n" +
    "       <button class=\"btn btn-small btn-success pull-right\" ng-click=\"isOpen = false\">closed</button>\n" +
    "   </li>\n" +
    "</ul>");
}]);

---

我已经尝试添加了

520px

，因此它将在中央打开，但在较小的屏幕上，这当然不正确。而且

top:position.top也不总是那么好。我相信解决方案很简单，但我不太擅长定位元素。
为了在屏幕中央显示绝对div，您应该首先设置对话框的静态宽度（以px、em或rem为单位），然后使用以下css规则：

left: 50%;
margin-left : -(dialogWidth/2) px;
width : dialogWidth px;

假设您想将对话框的宽度设置为250px，则上述设置应为：

left: 50%;
margin-left: -125px;
width : 250px;

请注意，如果设置了静态高度，则相同类型的规则可能会应用于顶部定位

left: 50%;
margin-left: -125px;
width : 250px;