Position div vertically in the middle - css

Question

How would I go about setting up a div horizontally/vertically in the middle?
Here is my code so far:
HTML
<div id="outer">
<div id="inner">
<div id="signin_header">
Sign in
</div>
</div>
</div>
CSS
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
height: 100%;
}
body {
display: table-cell;
}
#outer {
width: 100%;
text-align: center;
height: 100%;
}
#inner {
display: inline-block;
background-color: rgb(245, 245, 245);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(229, 229, 229);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(229, 229, 229);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(229, 229, 229);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(229, 229, 229);
border-top-style: solid;
border-top-width: 1px;
display: block;
font-family: 'segoe ui', arial, helvetica, sans-serif;
font-size: 13px;
width: 300px;
padding: 25px;
}
#signin_header {
color: rgb(34, 34, 34);
display: block;
font-family: 'segoe ui', arial, helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
height: 16px;
line-height: 16px;
margin-top: 0px;
width: 283px;
text-align: left;
}
Fiddle can be found here
http://jsfiddle.net/yaFeD/

Answer 1

Is this what you're after? I think this is what you were wanting?
html, body {
height: 100%;
}
html {
display: table;
margin: auto;
height: 100%;
}
body {
display: table-cell;
}
#outer {
width: 100%;
text-align: center;
height: 100%;
position:relative;
top:50%;
bottom:50%;
}
#inner {
display: inline-block;
background-color: rgb(245, 245, 245);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(229, 229, 229);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(229, 229, 229);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(229, 229, 229);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(229, 229, 229);
border-top-style: solid;
border-top-width: 1px;
display: block;
font-family: 'segoe ui', arial, helvetica, sans-serif;
font-size: 13px;
width: 300px;
padding: 25px;
}
#signin_header {
color: rgb(34, 34, 34);
display: block;
font-family: 'segoe ui', arial, helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
height: 16px;
line-height: 16px;
margin-top: 0px;
width: 283px;
text-align: left;
}
http://jsfiddle.net/EQjHz/

Answer 2

Assuming you are trying to center the Sign In div (not the lettering itself) this is the new CSS you would need, tested in your jsfiddle, by using margin: 0 auto; and position: relative; your setting the div in the middle of that div.
#signin_header {
color: rgb(34, 34, 34);
display: block;
font-family: 'segoe ui', arial, helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
height: 16px;
line-height: 16px;
margin: 0 auto;
position: relative;
width: 283px;
}
edit: i also took your text-align: left; out

Answer 3

Adding margin:auto; to the inner-div will do the trick.
When you only want horizontal alignment, add only margin-left:auto;margin-right:auto;.
Likewise for vertical alignment, add margin-bottom:auto;margin-top:auto;