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/

首先你需要制作身体和身体html占用100％宽度＆amp;高度

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

确保减少margin-left＆amp; margin-right有50％的容器width

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

Answer 2

首先从代码中删除'align =“center”'并将其替换为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表示将内容放在中心。

如何使用CSS将<div>置于屏幕中心（无论屏幕大小）？</div>

2 个答案: