Vertically centering a div

Question

thiv.net/mobile needs to work on mobile, and it does, however when I turn my ipod to vertical, it changes drastically, my problem is i need the whole lot, textbox, button and image to be centered vertically, or change on rotate. I think centering the div vertically is the best option, so what css would i use?

Currently i have tried:

.center
{
position:absolute
top:40%;
bottom:40%;
height:20%;
}

But that doesn't work, so maybe it should only be centered after rotating? Any ideas?

Answer 1

Try following CSS :

.center {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
 }

you can also follow the link of stack-overflow : Best way to center a <div> on a page vertically and horizontally?

Answer 2

If you know the height:

div.centered{
 height: 100px;
 top: 50%;
 margin-top: -50px;
}

Optional: position: absolute | relative | fixed position: absolute | relative | fixed position: absolute | relative | fixed depending on what you want to achieve

the margin-top should always be 0 - half of the height of your div to center.