title: Vertical align div to unknown height div without affecting horizontal centering
body: <p><a href="https://i.stack.imgur.com/iHJDO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iHJDO.png" alt="Desired layout"></a></p>
  
  <p>In the above image there is a red div of 100% width and unknown height. The height is controlled by the height of the orange div plus some padding maybe.</p>
  
  <p>The height and width of the orange div are controlled by dynamic text content which we do not know ahead of time, but the orange div should be centred horizontally within the red div with equal width on both sides.</p>
  
  <p>The blue div will be a fixed width and height (lets say 50px x 50px, smaller than the orange div), and placed over on the left hand side. It will sometimes be visible and sometimes not (controlled by javascript - either visibility or display, whichever works best), but in either case it should not affect the horizontal centring of the orange div. However, the vertical center of the blue div should be vertically aligned to match the vertical centre of the orange div.</p>
  
  <p>I can add extra divs, or change things to spans, anything like that, but at the moment anything I try means that the flow of the horizontal centering for the orange div is taking into account the blue div when I need the blue div kind of taking out of the flow entirely.</p>
  
  <p>Any ideas?</p>