title: Vertical alignment of a DIV inside another DIV
body: <p>I'm trying for some days to vertically align the <code>.sl_container</code>.<br> 
  I have tried <code>vertical-align: middle</code>, but that doesn't work.<br>
  <br>
  If i specify a height and width for the <code>.slideshow</code>, then using <code>top: 50%;</code> and <code>transform: translateY(-50%);</code>, that works. <a href="http://jsfiddle.net/MrHeadSlash/bL3ysgnx/37/" rel="nofollow noreferrer">See here</a>. <br>
  The problem is that if i remove the height and width for the slider to take up the available space and adapt, then the this will make the inner div appear moved upwards. <a href="http://jsfiddle.net/MrHeadSlash/bL3ysgnx/38/" rel="nofollow noreferrer">See here</a>.</p>
  
  <p><code>display: table-cell;</code> was not an option as it would have the arrows at the sides of the full width of the parent div instead of on the image.</p>
  
  <p>I've tried flex before, and it gets vertically aligned, but if the parent DIV width is bigger than the child DIV, for some reason it goes to </p>
  
  <p>As I said, I’ve tried multiple ways and there is not a single one that gets it done well without breaking the arrow positions.</p>
  
  <p>What I’ve done until now: <a href="http://jsfiddle.net/MrHeadSlash/bL3ysgnx/40/" rel="nofollow noreferrer">JSFiddle</a><br>
  The before mentioned settings are commented out in the CSS section.</p>
  
  <p>Any insight to this would be helpful as to a way or how to get it aligned without breaking the whole slide and arrows.</p>
  
  <hr>
  
  <p>FYI: There is a bleeding effect from the DIV's or images expanding like 1-2px to the bottom, reason why I have each DIV coloured to see if I can fix it. I'm sure it something silly and if you know what it is, please say so. It’s not important so I don’t really care much. xD</p>