title: How to center align a button and place it in front?
body: <p>I have a button that I want to place in front of my video and aligned at the center of it. So I tried using <code>position-relative</code> to bring it in front of the video and <code>flex</code> to align it to the vertical and horizontal center. However, it is not working. It has the correct z index now thanks to <code>position-relative</code> but it is not center aligned. How can I make it work and why is flex not working here? Thanks..</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-12&quot;&gt;
      &lt;div class=&quot;mx-auto w-90 h-90&quot;&gt;
        &lt;div id=&quot;videoWrapper&quot; class=&quot;embed-responsive embed-responsive-16by9 darken&quot;&gt;
          &lt;video id=&quot;videoPlayer&quot; src=&quot;https://www.youtube.com/watch?v=P-b4SUOfn_4&quot; 
            allowfullscreen controls&gt;&lt;/video&gt; 
          &lt;button class=&quot;btn btn-primary btn-lg p-2&quot;&gt;
          Watch video&lt;i class=&quot;fa fa-caret-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;   
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And here is my css:</p>
  <pre><code>.btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
  </code></pre>