无论使用的屏幕宽度如何，如何将视频放在屏幕中央？

Question

我正在使用 jquery 移动设备，无论屏幕的宽度如何，我都想将视频放在屏幕中央。我使用了这种语法，但左边距和右边距不一样。 [

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
    <title>Hello World</title>
  </head>

  <body>

    <div data-role="header"></div>
  
    <div data-role="main" class="ui-content">
      <span style="position: fixed; left: 50%; top: 50%; margin-left:-150px; margin-top: -150px;">
        <video width="block" height="auto"   id="video_mute" controls>
          <source src="angka/bilangan_1.mp4" type="video/mp4">
        </video>
      </span>
    </div>
  </body>
</html>

Answer 1

使用transform代替边距。检查下面更新的片段...

.videoDiv {
  position: fixed; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%);
}

<div data-role="header">
</div>

<div data-role="main" class="ui-content" >
  <span class="videoDiv" style="">
    <video width="block" height="auto"   id="video_mute" controls>
      <source src="angka/bilangan_1.mp4" type="video/mp4">
    </video>
  </span>
</div>

Answer 2

使用transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50 %,-50%);对于中心

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
    <title>Hello World</title>
    </head>

<body>

  <div data-role="header">
  </div>
  
  <div data-role="main" class="ui-content" >
 <span style="position: fixed; left: 50%; top: 50%; transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);">
    <video width="block" height="auto"   id="video_mute" controls>
  <source src="angka/bilangan_1.mp4" type="video/mp4">
  </video></span>
  </div>

无论使用的屏幕宽度如何，如何将视频放在屏幕中央？

how to put a video fit in the center of screen whatever width of the screen is used?

html

javascript

jquery-mobile