Vertical center content, unknown height, overflow hidden

Question

I have a situation where I need to vertically center some content (specifically an iFrame) inside of a div where the parent div will be smaller than the content. So far, everything I can find about vertically centering is taking about images which does not seem to work the same way.

Here is the simple code ...

<div class="video">
  <iframe id="youtube-XXXX" src="..." style="width: 855px; height: 481px;"></iframe>
</div>

Now, the iframe is generated code but it does have an id value I can reference. The parent div needs to be AT MOST 330px tall (this is a responsive design, so it could end up shorter). So in this case, I am looking for the top and bottom 75px of the iframe to be hidden (481px - 330px / 2).

Right now, I have the CSS styles on the div.video as follows:

div.video {
  overflow: hidden;
  max-height: 330px;
}

Now, I get the expected height but the top of the iframe lines up with the top of the div. How can I get the iframe to render in the middle.

score 0 · Answer 1 · edited May 23 '17 at 10:25

you could use jQuery for the purpose: the Jquery function would be like this:

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                            $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                            $(window).scrollLeft()) + "px");
return this;
}

and the call can be like this:

$(element).center();

in your case assign a name to your div like "dvVideo" and then call the function:

$("#dvVideo").center();

credit to: Using jQuery to center a DIV on the screen

Vertical center content, unknown height, overflow hidden

1 Answers1