centering div not working - html

Question

I am trying to center the text and form field inputs in the #registration-code-entry .registration-code-entry-content div
Not sure what I am doing wrong.
http://jsfiddle.net/yLX4F/
<div id="registration-code-entry">
<div class="registration-code-entry-header"></div>
<div class="registration-code-entry-middle">
<div class="registration-code-entry-content">
<form class="registration-form">
<div class="field">
<input type="text" name="first_name" placeholder="*First Name" class="required" />
</div>
<div class="field">
<input type="text" name="last_name" placeholder="*Last Name" class="required" />
</div>
<div class="field">
<input type="email" name="email" placeholder="*Email Address" class="required" />
</div>
<div class="field">
<input type="text" name="phone" placeholder="Phone Number" />
</div>
<div class="field">
<input type="checkbox" name="optin">
<label for="optin" />Yes, I would like to receive more information</label>
</div>
<div class="field">
<input type="checkbox" name="accept" class="required" />
<label for="accept">*I accept the Official Rules.</label>
</div>
<input type="submit" class="submit-btn" value="">
</form>
</div>
</div>
<div class="registration-code-entry-footer"></div>
</div>
css
#registration-code-entry {
height: 100px;
width: 359px;
position: absolute;
top: 100px;
right: 20px;
background: transparent;
.registration-code-entry-header {
top: 0;
background: transparent url('../images/form-header.png') no-repeat;
width: 359px;
height: 17px;
}
.registration-code-entry-middle {
background: #713487;
.registration-code-entry-content {
border: 1px solid red;
width: 350px;
margin: 0 auto;
color: #fff;
form {
display: inline-block;
margin: 0 auto;
.field {
margin: 10px 0;
input[type="email"], input[type="text"] {
padding: 5px;
}
}
input.submit-btn {
background: transparent url('../images/submit-btn.png') no-repeat;
width: 168px;
height: 59px;
display: block;
border: 0;
}
}
}
}
.registration-code-entry-footer {
display: block;
bottom: 0;
background: transparent url('../images/form-footer.png') no-repeat;
width: 359px;
height: 11px;
}
}

Answer 1

You can add text-align: centerto .field. You can also change to display: block for form to make the form expand to the full width of the parent.
jsfiddle

Answer 2

Centering the input ?
This will centering it :
.field input[type="text"], .field input[type="email"] {
display:block;
margin: auto;
}
Check This

Answer 3

Just change youre less :
...
.field {
margin: 10px 0;
input[type="email"], input[type="text"] {
padding: 5px;
display:block;
margin:0 auto;
}
}
...