css - Center overflowing element inside other element -

i have iframe inside div this:

<section>    <div>       <iframe></iframe>    </div> </section> 

the iframe contains youtube video in flash won't matter in case.

i'm building mosaic , therfore trying use div crop iframe appropriate size.

this done by

.section     {height: 251px;     width: 198px;     overflow: hidden} 

works great center video aswell. images, add them background-images , use

background-size: cover  

to center them. neat because automatically rescale maximum possible size. doesn't work video. settle centering iframe vertically , horizontally, if possible.

will adding css help? works if div bigger section.

section div {     margin-top:-50%;     margin-left:-50%; } 

http://jsfiddle.net/hvcxm/