如何在使用CSS的视频中垂直居中放置按钮？

Question

如何在使用CSS的视频中垂直居中放置按钮？

这是我的代码 https://jsbin.com/curefoyefe/edit?html,css,js,output

<video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class="" src="https://www.w3schools.com/html/mov_bbb.mp4 . "></video>
<button class="btn btn-danger mleft-15" ng-click="live_video = null" ng-show="live_video" style="" class="abc">Delete</button>

我想添加一个按钮，该按钮在图像中的圆圈处伸展。

Answer 1

对于垂直对齐，可以使用flex。将按钮和视频放入容器中，然后将其应用于该样式：

.parent{
  display: flex;
  flex-direction: row;
  align-items: center;
}

在具有行方向的flex中，align-items: center将元素垂直居中。

codepen：https://codepen.io/ya3ya6/pen/KLOaVJ

Answer 2

/ *父元素必须相对于位置* /

按钮{

位置：绝对；

顶部：50％；

左：50％；

margin-top：-15px； / *按钮高度的一半* /

margin-left：-50px; / *按钮宽度的一半* /

}

Answer 3

Here是解决方案。我希望这会有所帮助。

css

   .video-container {
      display: table;
    }

    .button-wrapper {
      display: table-cell;
      vertical-align: middle;
    }

HTML

<div class="video-container">
  <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class="" src="https://www.w3schools.com/html/mov_bbb.mp4 . "></video>
  <div class="button-wrapper">  
     <button class="btn btn-danger mleft-15" ng-click="live_video = null" ng-show="live_video">Delete</button>
  </div>
</div>