Centering element inside another element

Question

I have an iframe inside a div like:

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

the iframe contains a YouTube video, but that probably doesn't matter.

I create a mosaic and try to use a div to crop the iframe to the appropriate size.

this is done

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

Works great, but I would also like to focus the video. For images, I add them as background images and use

 background-size: cover 

to center them. This is neat because they automatically scale to the maximum possible size. However, this does not work for video. I would agree to simply center the iframe vertically and horizontally, if possible.

Answer 1

Will this be added to your css help? It works if the div is larger than the section.

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

http://jsfiddle.net/hvCXm/

Answer 2

Iframe wrapper and use text-align: center; to align the horizontal center

 div { text-align: center; display: block; } 

or

 iframe { margin: 0 auto; display: block; } 

Answer 3

Try:

 iframe { margin:0 auto; } 

Answer 4

The standard way to block block elements:

 iframe { display: block; margin-left: auto; margin-right: auto; }