title: Position DIV relative to it's Parent Parent
body: <p>EDIT- This question was initially closed as a duplicate with <a href="https://stackoverflow.com/questions/114543/how-can-i-horizontally-center-an-element">this question</a> linked as the answer. <em>However this answer does not address this specific case.</em></p>
  <p><strong>Quick background</strong> - I am a graphic artist that's been tasked with this project. I've gotten to this point through Google-fu and Stack Overflow. I'm open to any solution within reason. CSS, JS, jQuery, whatever. But now I'm stuck and, more worrisome, I'm afraid I've codded myself into a corner.</p>
  <p><strong>Code So Far</strong> -
  <a href="https://jsfiddle.net/frazzledCoder/w7a2L39e/" rel="nofollow noreferrer">https://jsfiddle.net/frazzledCoder/w7a2L39e/</a></p>
  <p><strong>Problem</strong> - As you can see, my tile based &quot;menu&quot; is functioning great EXCEPT that I cannot figure out how to center the tiles' menus relative to the parent of the parent.</p>
  <p>That is, I'm trying to make the DIV with class <code>.tile-menu-container-open</code> centered to the parent of it's parent, DIV <code>.tile-collection</code>.</p>
  <p><em>Note: From what I can tell, I need to keep the menu container DIV where it is in the overall structure so as to maintain the position of the closed tiles, especially when the window resizes.</em></p>
  <p>It sorta works, and resizing the window does make the menu container collapse to smaller sizes ... sorta.</p>
  <p>Am I out of luck here?</p>