如何使用CSS对齐视频窗口中心的按钮_Css_Html

如何使用CSS对齐视频窗口中心的按钮

css html

如何使用CSS对齐视频窗口中心的按钮,css,html,Css,Html,我们正在浏览器上编写视频播放器，需要在视频窗口上显示播放按钮。用户可以更改视频窗口的大小。播放按钮应显示在视频窗口的中心 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Player</title> <style> #app {

我们正在浏览器上编写视频播放器，需要在视频窗口上显示播放按钮。用户可以更改视频窗口的大小。播放按钮应显示在视频窗口的中心

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Web Player</title>
        <style>
            #app {
                width: 100%;
                height: 100%;
                overflow: hidden;
                outline: none;
            }
        </style>
     </head>
     <body style="overflow: hidden; margin: 0px;">
         <link rel="stylesheet" href="test.css">
         <div id="app"></div>
         <video src="" id="videoID" width="100%"></video>
         <button type="button" id="playVideo">+</button>
     </body>
</html>

#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%;
}

我只是给左和顶部的播放视频为200像素，因为我无法中心的按钮。我尝试了文本对齐，位置和它不工作。我们可以在javascript中使用视频元素的getBoundingClientRect（）并手动计算按钮的坐标来实现这一点。任何人都可以告诉我，我们是否可以在不使用Javascript的情况下将视频窗口上的按钮居中。

试试这个（#播放视频）：

position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);

佩奇可能会帮助你

编辑：考虑创建包含两个元素的div：

<div id="container">
     <video src="" id="videoID" width="100%"></video>
     <button type="button" id="playVideo">+</button>
</div>


#container {
  position:relative;
}

#playVideo {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}


+
#容器{
位置：相对位置；
}
#播放视频{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
}

当视频占据整个页面时，它工作正常。但如果我在web浏览器上打开Javascript控制台，则该按钮不会显示在视频窗口的中心。它将显示在页面的中心。创建一个同时包含这两者的div怎么样？看看我编辑过的答案