title: Vertically center an image insider container element with just css
body: <p>I need to vertically center some images inside their container <code>&lt;li&gt;</code> blocks using CSS but Im not sure how to go about it. I could resort to using javascript to calculate the height of the image and then do some math to center it vertically using margins but that seems clunky and stupid. </p>
  
  <p>Is there any good CSS-based solution to accomplish vertical alignment without using fixed-margins (image height is variable)?</p>
  
  <p>Images sticking to the top of their container li element:
  <img src="https://i.stack.imgur.com/plzll.png" alt="Images sticking to the top of their container li element"></p>
  
  <p><img src="https://i.stack.imgur.com/F2kTa.png" alt="enter image description here"></p>