如何使用CSS将<div>放在屏幕中心(无论屏幕大小如何)？

Question

这是div元素(一个视频)，我想嵌入到浏览器屏幕的中心。我尝试了不同的解决方案，但没有理解各种警告。我可以水平地对着它，但是垂直地怎么做呢？

<div align= "center">

<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="360"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>

</div>

Answer 1

给你，http://jsfiddle.net/852LC/

首先，您需要使body & html获得100%的宽度和高度。

body, html {
    width: 100%;
    height: 100%;

}

body {
    position: relative;
}

然后，您可以像这样在中间absolutely position div。

.center {
    width: 640px;
    height: 360px;

    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -180px;
}

确保用50%的集装箱减少margin-left和margin-right，width

编辑:包含播放机http://jsfiddle.net/852LC/2/的小提琴

Answer 2

首先，从代码中删除'align=‘“中间”，并将其替换为ID或类。

在css中，我将使用ID中心。

 #center {
        width: 640px;  // the size of your object
        height: 360px; // the size of your object
        margin: 0 auto; 
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;}

在所有浏览器上，我花了一段时间才使它正常工作。技巧是0从顶部到0从底部，这意味着它把内容放在中心。