Question

I have being researching regarding this question for a long time but I was not lucky. Here is the situation. Assume you have a blue rectangle in the center of the page. When you go full screen, we can use percentage for height and width to preserve the ratio of rectangle. However, the position of rectangle changes and it moves up and you end up with extra space at the bottom of the page.

So what should I do to keep rectangle in the center of the page (equal vertical and horizontal distance) when full screen mode is enabled? In other words, if your screen is 1280×800, center of rectangle be at (640,400)

If you check home page of Chrome browser, when you go full screen, the position of apps stay the same and you don’t end up with extra space at the bottom. Appreciate your help

Answer 1

Define width of the rectangle and use margin: 0 auto; to center it in page horizontally.

If you want to center a div horizontally and vertically, use something like this

HTML

<div id="rectangle"></div>

CSS

#rectangle {
   width: 30%; //can set any value here
   height: 20%; //can set any value here
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -15%; //negative half of width
   margin-top: -10%; //negative half of height
   background-color: red;
}​

See the fiddle here.

OR

HTML

<div id="wrapper">
  <div id="container">
    <div id="rectangle"></div>
  </div>
</div>​

CSS

body, html {
    height: 100%;
    overflow:hidden;
}
#wrapper {
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    position: relative;
}
#wrapper[id] {
    display: table; 
    position: static;
}
#container[id] {
    display: table-cell; 
    vertical-align: middle; 
    width: 100%;
}
#rectangle {
    width: 200px; 
    height: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: blue;
}

​
See the fiddle here.