Cant center form? - html

Question

So #container is already centered, but I can't seem to get the <form> centered. I want to have everything inside the form horizontally centered and for some reason it's not working. I've tried every trick that I know.
<!-- Container Start -->
<div id="container">
<h1 class="signup-header-text">SIGN UP</h1>
<div class="clear"></div>
<form class="signup-form" action="#" method="post">
<div id="first_step">
<div class="form">
<label for="gender">You are:</label>
<br />
<select id="gender" name="gender" size="2">
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<div class="clear"></div>
</div>
<div class="clear"></div>
<input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
</div>
</form>
<div id="progress_bar">
<div id="progress"></div>
<div id="progress_text">0% Complete</div>
</div>
</div>
<!-- Container End -->
My CSS
#container {
height: 410px;
min-height: 410px;
min-width: 756px;
width: 756px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
margin-top: -205px; /* Half the height */
margin-left: -378px; /* Half the width */
background: #e9e5e5;
border: solid #dcdcdc 2px;
outline: solid #c4c4c4 1px;
-webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
-moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
}

Answer 1

Added text-align: center;
#container {
height: 410px;
min-height: 410px;
min-width: 756px;
width: 756px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
margin-top: -205px; /* Half the height */
margin-left: -378px; /* Half the width */
background: #e9e5e5;
border: solid #dcdcdc 2px;
outline: solid #c4c4c4 1px;
-webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
-moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
text-align: center;
}​
http://jsfiddle.net/xjL7t/

Answer 2

Simply center your text.
#container {
height: 410px;
min-height: 410px;
min-width: 756px;
width: 756px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
**text-align:center;**
margin-top: -205px; /* Half the height */
margin-left: -378px; /* Half the width */
background: #e9e5e5;
border: solid #dcdcdc 2px;
outline: solid #c4c4c4 1px;
-webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
-moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
}

Answer 3

Try this:
.signup-form {
margin: 0 auto;
}

Answer 4

Find the element you want to center, set a width, and set margin: 0 auto on it.
.signup-form {
margin: 0 auto;
width: 100px;
}
http://jsfiddle.net/EXLSJ/
If you don't want to set a fixed width, follow these instructions to 'shrinkwrap' your container: How to make div not larger than its contents?

Answer 5

add
text-align:center;
float:center;
clear:center;
also works with left and right

Answer 6

Add text-align: center;:
#container {
height: 410px;
min-height: 410px;
min-width: 756px;
width: 756px;
overflow: hidden;
position: absolute;
top: 50%; left: 50%;
margin-top: -205px; /* Half the height */
margin-left: -378px; /* Half the width */
background: #e9e5e5;
border: solid #dcdcdc 2px;
outline: solid #c4c4c4 1px;
-webkit-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
-moz-box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
box-shadow: 0px 5px 15px rgba(48, 50, 50, 0.28);
**text-align: center;**
}