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

【问题标题】：Centering a DIV that is wider than the viewport [duplicate]将比视口更宽的 DIV 居中 [重复]
【发布时间】：2016-10-11 05:16:13
【问题描述】：

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

就目前而言，它非常简单，因为它适合任何普通的浏览器窗口（我暂时不支持移动设备）。
然而，随着每一代的增加，树的宽度会增加一倍，所以当表格对于视口来说太大时，我需要得到一个很好的展示。
如果您减小浏览器窗口的大小，您会看到：

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

总而言之，我的 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。

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

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

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

【讨论】：

你的意思是transform: translateX(-50%);
哈哈@debute，当然！谢谢
这种工作，但引入了另一个问题，该问题在我尝试过的各种其他解决方案中出现。当视口比树窄时，滚动条设置在左侧，因此可以向右滑动以查看树的右侧，但不能向左滑动以查看左侧。见myrootsmap.com/so_tree3.php。滚动条也从 .tree div 移到了浏览器窗口，但这可能可以通过额外的包围 div 来解决。

【解决方案2】：

请尝试以下代码：

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

【讨论】：

这似乎只是将整棵树推到了右边。见myrootsmap.com/so_tree4.php
#wholetree { position: relative; top: 120px; margin-left: auto; margin-right: auto; display: block; } 也对“#wholetree”进行更改
不，这没有任何区别。

【解决方案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);
});

【讨论】：