title: CSS: how to horizontally center video on mobile screen with 100% height and overflow width?
body: <p>In the following code, I am trying to center a video to full mobile screen height, and wanted to evenly overflow the video width to left and right side.</p>
  
  <p><strong>style #0</strong> shows the original size</p>
  
  <p><strong>style #1</strong> shows me trying to center the video, but the video shifts to the right</p>
  
  <p><strong>style #2</strong> shows the fix, the video is perfectly centered, however, the transformation will cause issues when our web site's language is in RTL (right aligned language, such as Arabic).</p>
  
  <p>I wanted to find a way to properly center the video without using any transformation (i.e. do not use <strong>style #2</strong>), any good suggestions?</p>
  
  <p><strong>cshtml:</strong></p>
  
  <pre><code>&lt;div class="videodiv"&gt;
      &lt;video class="webvideo"&gt;&lt;/video&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p><strong>Style #0:</strong></p>
  
  <p>This shows the original video in its natural ratio</p>
  
  <pre><code>.videodiv {
      text-align: center;
  }
  
  .videodiv .webvideo {
      display: block;
      margin: 0 auto;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/fRBa3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fRBa3.png" alt="enter image description here"></a></p>
  
  <p><strong>Style #1:</strong>
  under this css, when height is 100%, the video width actually overflows the screen, the left side is aligned with left screen border, the right side overflows.</p>
  
  <pre><code>.videodiv {
      text-align: center;
  }
  
  .videodiv .webvideo {
      display: block;
      height: 100%;
      width: auto;
      margin: 0 auto;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/jKMwD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jKMwD.png" alt="enter image description here"></a></p>
  
  <p><strong>Style #2:</strong></p>
  
  <pre><code>.videodiv {
      text-align: center;
  }
  
  .videodiv .webvideo {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      -ms-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      display: block;
      height: 100%;
      width: auto;
      margin: 0 auto;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Y6HwC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y6HwC.png" alt="enter image description here"></a></p>