垂直居中高度未知的div

Question

Ok, i know it has been asked several times but i didn't find a cross browser solution and don't get the hang of it. :-(

I have this code to scale a video to 100% browser width:

<div id="flashposition"><div id="flashvimeo"class="vimeo">HereIsTheVideo</div></div>

and this css:

#flashposition {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 0px;
height: 0;
z-index:30;
display: block;
overflow:hidden;
}

#flashvimeo object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

It works, but cuts off the excess height at the bottom, but i would like it to be centered, so excess height of the video is cut of half at the top and bottom.

Any ideas that are safe and also work in IE7? Or is the only way to do it in js/jquery and recalculating height/width due to browsers window size like here http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php ?

Answer 1

Unfortunately there isn't an elegant cross browser, backward compatible solution to this without script.

However CSS3 supports box-flex with box-orient: horizontal; which is designed to do exactly what you want. Browser support for CSS3 is still a bit thin on the ground so if you want a solution that works for everyone you'll need to use the window resize event and layout with script.

HTML 5 Rocks - flexbox

Answer 2

This answer may be disgusting but Ive found that the easier and cross browser way to vertical centering any element in html/css, is to use table elements. Other way is using JS to calculate the container height and then positioning.

Answer 3

This trick is pretty good: http://css-tricks.com/centering-in-the-unknown/

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Answer 4

This method over at CSS-tricks works in all browsers and IE8+, it is the closest you're going to get to a method with good browser support outside of tables.

Demo here: http://jsfiddle.net/YqKMH/show/