将比视口更宽的 DIV 居中[重复]

我正在创建一个页面来显示祖先的家谱。
该页面是动态创建的，因此我无法知道会有多少代或内容是什么。
然而，这里显示了一个相当简单的示例：http://myrootsmap.com/so_tree2.php http://myrootsmap.com/so_tree2.php.

就目前情况而言，它非常简单，因为它适合任何普通的浏览器窗口（我目前不支持移动设备）。
然而，随着每一代额外的生成，树的宽度都会加倍，因此当表格对于视口来说太大时，我需要获得良好的演示。
如果缩小浏览器窗口的大小，您将看到：

1. 需要时，树有自己的水平滚动条（好）
2. 树总是左对齐（不好）
3. 如果树对于视口来说太高，则垂直滚动条位于窗口上而不是树上（也很糟糕）

总而言之，我的 HTML 看起来像这样：

<div id="container">
  <?php include( "includes/header_index.php"); ?>

  <div id="wholetree">
    <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="add_gen">
      <input type="hidden" name="MM_insert" value="add_gen">
      <a href="javascript:void()" onclick="document.add_gen.submit()" class="tree_button">Add Another Generation</a>
    </form>
    <form action="map.php" method="get" name="view_map">
      <input type="hidden" name="origin" value="<?php echo $origin_id ?>">
      <a href="javascript:void()" onclick="document.view_map.submit()" class="tree_button view_button">View the Map</a>
    </form>
    <div class="tree">
      <?php include($tree); ?>
    </div>
  </div>
</div>

还有CSS

* {
  margin: 0;
  padding: 0;
}
#container {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#wholetree {
  position: relative;
  top: 120px
}
.tree {
  overflow: auto;
  padding: 10px
}
.tree ul {
  padding: 0 0 20px;
  position: relative;
}
.tree li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
  margin: 0 -2px 0 -2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 0 5px 20px 5px;
}

问题：

• 我怎样才能得到div class=tree为中心于div id=wholetree?
• 我怎样才能得到div class=tree如果溢出则滚动到底部？和
• 如何在其上获得垂直滚动条？

我只喜欢 CSS，但如果这是唯一的方法，我会使用 jQuery。

您可以将要在相对父级中水平绝对居中的元素定位并执行以下操作：

.tree{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这将首先将元素向右对齐 50%，然后将其平移回其自身宽度的 50%。

（令人惊讶的是）它对浏览器也非常安全。