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?

[this article](http://css-tricks.com/centering-in-the-unknown/) Hopely useful — egig, May 06 '13 at 08:07

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

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?

edited May 23 '17 at 12:28

Community

1
1

answered May 06 '13 at 08:10

Vaibhav Jain

3,729
3
25
42

score 0 · Answer 2 · answered May 06 '13 at 08:17

If you know the height:

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

Optional: 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.

Vertically centering a div

2 Answers2