将 DIV 居中并根据浏览器尺寸进行调整

Question

我正在构建一个网页来嵌入流媒体视频。我想将视频水平和垂直居中，同时调整视频大小（基于浏览器大小，而不是手动）以填充可用的屏幕空间。

这是棘手的部分；此页面的导航高度为 60px，视频必须为 16:9。我希望能够将最小宽度和最小高度设置为 800px 宽度和 450px 高度。视频不应与导航重叠，因此如果垂直方向稍微偏离中心也没关系。如果需要，我可以使用 jQuery，尽管 CSS(3) 更好。这个页面主要供私人使用，所以我不太担心跨浏览器兼容性。

我不知道如何在如此复杂的情况下实现这一目标。我的想法是创建一个填充页面其余部分的 div，并以绝对定位将其置于该 div 的中心。不幸的是，我不知道如何调整其大小并保持正确的宽高比。如果有帮助，我将在这个项目中同时使用 UStream 和 Justin.tv。

谢谢。

编辑1：我不知道如何使底部 div 填充页面的其余部分，同时减去导航。我认为 height:100%; 会覆盖它，但不幸的是，它覆盖了整个页面的 100%，包括 60px 导航。

Answer 1

使用此 jQuery 插件： FitVids

水平和垂直居中 CSS3 Flexbox （有限的浏览器支持，但正如你所说，这不是问题）

这是代码（没有供应商前缀）简化）：

.parent{
      display: box;
      box-orient: horizontal;
      box-pack: center;
      box-align: center;
}

将其应用于视频的父级。

现在，导航不应中断居中，但在这种情况下，您始终可以绝对定位导航栏。顶部会有一些视频被剪掉，但 60 像素还不错。

Answer 2

试试这个代码：

<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

Answer 3

这是我的做法：

var videoElement = $("#IDofYourVideo");

function SizeUpVideo(elm) {
    var W = parseInt($(window).width()),   //get browser width
        H = parseInt($(window).height()),  //get browser height
        ratio = 16/9,                      //set ratio
        videoH = H-60,                     //subtract 60px
        videoW = H * ratio;                //set width according to ratio

    if (videoW > W) {videoW=W; videoH=W*(1/ratio);} //if width is more than screen, do it the other way around
    if (videoW >= '800' || videoH >= '450') {
        elm.css({top: (H-videoH+60)/2, left: (W-videoW)/2, height: videoH, width: videoW});
    } else {
        elm.css({top: 60, height: 450, width: 800});
    }
};

SizeUpVideo(videoElement);

$(window).bind("resize", function() {
    SizeUpVideo(videoElement);
});

小提琴：http://jsfiddle.net/bAXwK/