• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1182
  • Last Modified:

JQuery Mobile: Use CSS to vertically center a DIV on the page

I have a homepage that is set to scale based on the device size.  I have set the header and footers to be fixed to the top/bottom of the page.  I have a DIV in the center with menu buttons on it.

I would like the DIV to be vertically centered based on the size of the page when rendered. I found a few solutions on here and the best one so far works but it seems to horizontally center it also which I cant figure out how to disable.

This is the solution I am referring to.... http://www.experts-exchange.com/viewCodeSnippet.jsp?codeSnippetId=8131290
0
MLeehersh
Asked:
MLeehersh
1 Solution
 
David S.Commented:
This code is setting both the horizontal and vertical margins to 20%:
.vertical {height:300px;width:500px;margin:20%;border:solid 1px green; background:#ffc;}

Open in new window

To only set the vertical margins, do this:
.vertical {height:300px;width:500px;margin:20% 0;border:solid 1px green; background:#ffc;}

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now