1

This is the div element (a video) I want to embed such that it is in the center of the browser screen. I tried different solutions but did not understand various caveats. I can center it horizontally but how to do it vertically?

<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>
ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
user3237566
  • 31
  • 3
  • `div { position: fixed; top: 50%; left: 50%; margin-top: -180px; margin-left: -320px; }` You can use position `fixed` or `absolute`, depends what you want. – Milan and Friends Jan 26 '14 at 13:31
  • does the div have a fixed height? – Gert B. Jan 26 '14 at 13:31
  • @GertB. do you mean the height of video?then it is 360 px .That`s the height of div as well , right? – user3237566 Jan 26 '14 at 13:39
  • possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) – ЯegDwight Jan 26 '14 at 13:46

2 Answers2

3

here you go http://jsfiddle.net/852LC/

first you need to make body & html take 100% width & height

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

}

body {
    position: relative;
}

and then you can absolutely position the div in center like this

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

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

make sure to reduce margin-left & margin-right with 50% of the containers width

EDIT: fiddle containing the player http://jsfiddle.net/852LC/2/

Mihnea Belcin
  • 554
  • 3
  • 10
  • hey your code is giving me a video in the bottom right of my screen . – user3237566 Jan 26 '14 at 13:37
  • Couldn't have said it better myself. Good answer. – Dan Jan 26 '14 at 13:39
  • @Mihnea Belcin great ! your code put my video in the center of screen . so will it remain always in the center if I try it on diffrent screen ?and there are some horizontal and vertical scroll bars I`m seeing ?Can I delete them somehow ? – user3237566 Jan 26 '14 at 13:43
  • overflow: hidden; on body . updated fiddle http://jsfiddle.net/852LC/3/ .. you can drag the window and see if it stays in the center :) – Mihnea Belcin Jan 26 '14 at 13:44
  • @MihneaBelcin thanks for helping out so fast ! I wasted so much time on this and now it looks so perfect ,pink not withstanding :) – user3237566 Jan 26 '14 at 13:47
0

First remove 'align= "center"' from your code and replace it by an ID or a class.

In the css I am ussing I a going to use the ID center. 

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

This works perfectly every where on all the browser it took me a while to make it work. The trick is 0 from top and 0 from the bottom meaning it as to put the content in the center.

15eme Doctor
  • 365
  • 1
  • 3
  • 15