Вертикальное содержимое центра, неизвестная высота, переполнение скрыто

Question

У меня есть ситуация, когда мне нужно вертикально центрировать некоторый контент (в частности, iFrame) внутри div, где родительский div будет меньше, чем содержимое. До сих пор все, что я могу найти о вертикальном центрировании, - это делать изображения, которые, похоже, не работают одинаково.

Вот простой код ...

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

Теперь IFrame генерируется код, но он имеет значение идентификатора можно ссылаться. Родительский div должен быть AT MOST 330px tall (это отзывчивый дизайн, поэтому он может оказаться короче). Поэтому в этом случае я ищу верхний и нижний 75px iframe для скрытия (481px - 330px/2).

Прямо сейчас, у меня есть стили CSS на div.video следующим образом:

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

Теперь я получаю ожидаемый рост, но в верхней части IFrame линии с верхней части дел. Как я могу получить iframe для рендеринга в середине.

Answer 1

вы можете использовать JQuery для этой цели: функция Jquery будет выглядеть так:

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; 
} 

и вызов может выглядеть так:

$(element).center(); 

в вашем случае присвоить имя вашего ДИВ как "DVvideo", а затем вызвать функцию:

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

кредит: Using jQuery to center a DIV on the screen