how to vertical center button against a video of using css?

Question

how to vertical center button against a video of using css?

here is my code 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>

I want to add a button where the circle is stretch in the image.

Answer 1

For vertical align, you can use flex. put button and video in a container, then apply this style to that:

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

in a flex with row direction, align-items: center will center elements vertically.

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

Answer 2

/*parent element must be position relative */

button{

position: absolute;

top: 50%;

left: 50%;

margin-top: -15px; /*half of the height of your button */

margin-left: -50px; /*half of the widht of your button */

}

Answer 3

Here is the solution. I hope this will help.

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>