title: Centering with unknown width
body: <p>I normally center elements with dynamic widths with the following code. </p>
  
  <pre><code>.horz-vert-center {
     position: absolute;
     left: 50%;
     top:50%;
     transform: translate(-50%,-50%);
   }
  </code></pre>
  
  <p>The problem is the element will resize earlier than I want. eg. A menu goes to two lines when it could still fit on one: </p>
  
  <p><a href="https://i.stack.imgur.com/O6WHv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O6WHv.png" alt="enter image description here"></a></p>
  
  <p>I don't really understand this, if I am using % values, why do the margins not continue to get smaller? </p>
  
  <p>Demo here:
  <a href="https://codepen.io/garethj/pen/LWdaRr" rel="nofollow noreferrer">https://codepen.io/garethj/pen/LWdaRr</a></p>