title: how to align a button on the center of the video window using CSS
body: <p>We are writing a video player on the browser where we need to display a play button on the video window. The video window size can be changed by the user. The play button should be displayed on the center of the video window.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Web Player&lt;/title&gt;
          &lt;style&gt;
              #app {
                  width: 100%;
                  height: 100%;
                  overflow: hidden;
                  outline: none;
              }
          &lt;/style&gt;
       &lt;/head&gt;
       &lt;body style="overflow: hidden; margin: 0px;"&gt;
           &lt;link rel="stylesheet" href="test.css"&gt;
           &lt;div id="app"&gt;&lt;/div&gt;
           &lt;video src="" id="videoID" width="100%"&gt;&lt;/video&gt;
           &lt;button type="button" id="playVideo"&gt;+&lt;/button&gt;
       &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      color: #2c3e50;
      margin-top: 10px;
  }
  #playVideo {
      position: absolute;
      left: 200px;
      top: 200px;
      display: none;
      border: none;
      border-radius: 50%;
  }
  </code></pre>
  
  <p>I just gave left and top for playVideo as 200px as I am unable to center the button. I tried with text-align, position and it is not working. We can do this in javascript by using getBoundingClientRect() of video Element and calculating coordinates of button manually. Can any one please let me know if we can center the button on video window without using Javascript.</p>