셀 가운데에서 비디오를 수직으로 정렬하는 방법은 무엇입니까?

Question

고정 된 높이의 셀 중간에 비디오를 정렬하려고합니다. 상단과 하단의 오버플로가 숨겨져 있습니다.

까지 지금 내가있어합니다 :

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td height="150" style="display: block; overflow: hidden; vertical-align: middle;"> 
    <div style="position: relative;"> 
     <video autoplay loop width="100%" style="display: block;"> 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
     </video> 
    </div> 
    </td> 
    </tr> 
</table> 

그러나 "수직 정렬 : 중간;" "td"에서 아무것도하지 않는 것 같습니다.

난 단지 가운데 150 개 픽셀을 볼 수 찾고 있어요,하지만 현재는 최고 150을 보여주는 것 ... 내 JSfiddle 예에, 링크를 도울 수있는 사람들을위한

: https://jsfiddle.net/xtxkm02a/1/

감사합니다.

Answer 1

내 의견에 덧붙여 다음은 코드입니다.

table { 
 
    height: 300px; 
 
    border: 1px solid #000; 
 
} 
 
table td { 
 
    border: 1px solid #f00; 
 
    overflow: hidden; 
 
    vertical-align: middle; 
 
    height: 30px; 
 
} 
 
.video { 
 
    overflow: hidden; 
 
    height: 150px; 
 
} 
 
.video video { 
 
    width: 100%; 
 
    margin-top: -75px; 
 
}

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
     <td valign="center" style=""> 
 
      <div class="video"> 
 
       <video loop> 
 
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
       </video> 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table>