title: Centering a Popup Modal with Responsive Height/Scroll
body: <p>Ok, so I'm building a popup for our site. I need it to be centered on the screen, with max width and max-height values set so that it's never 100% of the screen. I also want it to show a scrollbar when applicable for the y-axis. </p>
  
  <p>I suspect that my issue lies with using display: table for the modal, which I am doing so that the modal fits the height of the child elements within it. I'm guessing it has a conflict with the weird combination of max-height, overflow: auto, etc. that I'm trying to use. Any suggestions are much appreciated.</p>
  
  <p>Here is a demo with the SASS/markup. If you resize your browser to be short, you can see how it doesn't set it to scroll but instead just puts the edges of the box outside of the screen.</p>
  
  <p><a href="http://codepen.io/heatherthedev/pen/deauy" rel="nofollow">http://codepen.io/heatherthedev/pen/deauy</a></p>