title: vertically centering video inside a video tag
body: <p>how do you center vertically a video inside a video tag? currently the video is flush top and the bottom is getting cut off. what i would like to do is for the middle of the video to be in the middle of the video container. the video's height will vary because it's responsive so as the browser becomes smaller so does the video. here's my code:</p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="video-wrap"&gt;
      &lt;video preload="auto" autoplay loop muted&gt;
          &lt;source type="video/mp4" src="video.mp4"&gt;
      &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#video-wrap {
      width: 100%;
      height: 400px;
      overflow: hidden;
  }
  </code></pre>