Centre Aligning a Div

Im currently making a website for the design studio I work for and its not far from completion. The one problem I am having is centreing the links at the very top. All these links are enclosed within one main DIV so all I want to do is align this div so it sits right in the middle of the users screen. Now it seem to do this horizontally but it wont do it vertically.

Could anyone please look at the code and help point out where I am going wrong.

The sit is currently hosted here: www.stormdfx.com/stormdfx


The DIV I want to centre is called storm-home



Any help would be much appriciated.

Thanks,

Rich

anyone able to help me? :(

I can't check from iPhone but maybe its because you've not set the left and right margins to "auto"?

See this for ref: http://www.w3schools.com/css/css_align.asp

Ive added margin-left and margin-right auto and it hasn't made it float in the centre. I've got top set to 50%.

Not sure what the problem is.

Centre aligning horizontally isnt the problem really its getting it to float in the centre vertically.

css vertical align?

Where do i place that in the code, im not sure?

I've tried it in a few locations and it doesn't seem to be working :S

this is the code for the part i want to centre:

HTML Code:

---

<div id="content">
        <article id="storm-home">
                <div><a href="#storm-dfx" class="home-create"> </a></div>
                <div id="text-box1"><img src="img/text-block1.png" alt="text" width="940" height="25" /></div>
                <div><a href="#service" class="home-create1"> </a></div>
                <div id="text-box2"><img src="img/text-block2.png" alt="text" width="940" height="19" /></div>
                <div><a href="#finger-pulse" class="home-create2"> </a></div>
                <div id="text-box33"><img src="img/text-block3.png" alt="text" width="940" height="30" /></div>
                <div><a href="#award-winning" class="home-create3"> </a></div>
                <div id="text-box4"><img src="img/text-block4.png" alt="text" width="940" height="16" /></div>
                <div><a href="#repack-service" class="home-create4"> </a></div>
                <div id="text-box5"><img src="img/text-block5.png" alt="text" width="940" height="28" /></div>
                <div><a href="#drop-line" class="home-create5"> </a></div>
                <div>
                        <div id="text-box6"><img src="img/text-block6.png" alt="text" width="146" height="47" /></div>
                        <div><a href="#your-brand" class="home-create6"> </a></div>
                </div>

---

This is the CSS for the storm-home id:

Code:

---

#content article { width: 940px; height: 550px;}               
                #storm-home,
                #storm-dfx,
                #service,
                #finger-pulse,
                #award-winning,
                #repack-service,
                #drop-line,
                #your-brand{padding-top: 10px;}
                #storm-home {position: absolute; top: 50%; margin-left:auto; margin-right:auto;  vertical-align:text-top;}
                #storm-dfx {position: absolute; top: 1090px;}
                #service {position: absolute; top: 2180px;}
                #content h1 {margin: 0 0 25px 0; font-size: 60px; font-family: arial; font-weight: normal; line-height: 65px;}
                #finger-pulse {position: absolute; top: 3270px;}
                #award-winning {position: absolute; top: 4360px;}
                #repack-service {position: absolute; top: 5450px;}
                #drop-line {position: absolute; top: 6540px;}
                #your-brand {position: absolute; top: 7630px;}

---

OK Ive tried adding this css to a new div and then wrapping that div around the content and it doesnt work. Now if I open a statr a new html document with nothing in it it seem works. So Im guessing some cod I already have isnt allowing it to align vertically in the centre though I dont know which bit of code :-(

Code:

---

#div-new{
  position: absolute;
  background: #000;
  top: 50%;
  left: 0;
  width: 100%;
}

---