居中比视口宽的DIV

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

就目前而言，它非常简单，因为它适用于任何普通的浏览器窗口（我暂时不能容纳移动设备）。
然而，每增加一代，树的宽度就会翻倍，所以当桌子对于视口来说太大时，我需要得到一个很好的演示。
如果您缩小浏览器窗口的大小，您将看到：

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

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

  
 <form action="" method="post" name="add_gen">  Add Another Generation  
 <input type="hidden" name="origin" value=""> View the Map 
 
  
 
  

和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。

Answer 1

您可以将想要的元素放置在相对父级的中心位置，并执行以下操作：

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

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

（令人惊讶的是）它也非常安全。

Answer 2

请尝试以下代码：

 margin-left: auto; margin-right: auto; display: block; width: 50%; 

Answer 3

最终的解决方案来自jQuery。 我使用jQuery来测量窗口的宽度和div内容的宽度（使用scrollWidth）。 然后使用scrollLeft将div向右滚动。 这样div就居中了，滚动条滑块位于中间，因此可以双向滑动。

 $(document).ready(function(){ var windowWidth = $(window).width(); var treeWidth = $('#tree').get(0).scrollWidth; var d = $('#tree'); d.scrollLeft((treeWidth-windowWidth)/2); });