Centering a DIV that is wider than the viewport

Question

I am creating a page to display a family tree of ancestors.
The page is created dynamically so I have no way of knowing how many generations there wil be or what the content will be.
However there's a fairly simple example shown here: http://myrootsmap.com/so_tree2.php.

As that stands, it's pretty straightforward because it fits on any normal browser window (I'm not accommodating mobile devices for the moment).
However with every extra generation the tree doubles in width so I need to get a good presentation when the table is too big for the view port.
If you reduce the size of your browser window you will see that:

1. The tree has it's own horizontal scrollbar when required (good)
2. The tree is always aligned to the left (bad)
3. If the tree is too high for the viewport the vertical scrollbar is on the window and not the tree (also bad)

In summary, my HTML looks like this:

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

And the 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;
}

Questions:

• How can I get the div class=tree to be centered in the div id=wholetree?
• How can I get the div class=tree to scroll to the bottom if it overflows? And
• How can I get a vertical scroll bar on it?

I prefer CSS only, but I'll use jQuery if that's the only way.

Answer 1

Please try the code below:

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

Answer 2

You can position the element you want to horizonatally center absolutely within your relative parent and do the following:

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

This will align the element 50% to the right first and then translate it back 50% of its own width.

It's (surprisingly) also very browser-safe.

Answer 3

The final solution came with jQuery. I used jQuery to measure the width of the window and the width of the content of the div (using scrollWidth). Then scrolled the div to the right with scrollLeft. This way the div is centred AND the scroll bar slider is in the middle so can be slid both ways.

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