title: How to center an element based on the parent div?
body: <p>I am trying to add a big play button on top of a video.</p>
  
  <p>The video itself is responsive, and I want the play button to always be centered horizontally and vertically within the video. </p>
  
  <p>It will be something like</p>
  
  <pre><code> ---------------------------
  |                           |
  |                           |
  |   play button in center   |  &lt;----video
  |                           |
  |                           |
   ---------------------------
  </code></pre>
  
  <p>I have something like:</p>
  
  <pre><code>&lt;div style='text-align:center;'&gt;
           &lt;div id='playIcon'&gt;&lt;img src='play.png'/&gt;&lt;/div&gt; 
            &lt;video id='video' &gt;
                &lt;source src=/video.mp4' type="video/mp4"&gt;
            &lt;/video&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css</p>
  
  <pre><code>#video{
     width:100%;
     max-height:1200px;
     z-index: 1;
     background-color: black;
  }
  </code></pre>
  
  <p>How do I center the play button this case?</p>