div内的元素不是中心对齐

Question

how to make the container inside the div to centre align.... i gave margin left and right auto but its not working.... where as in iphone lay out it becomes centre aligned providing my code below....

http://jsfiddle.net/2a5mW/1/embedded/result/

<div class="hide fade in" id="signup-modal" conduit_fixed_handled="true" conduit_orig_mtop_val="-306" style=" display: block;" aria-hidden="false">
    <div class="page-title">Add New Vendor</div>
    <div>
                    <span>Vendor no</span>


100012                  <span style="">Starting no:</span><span style="color: red;">100000</span>
                </div>

    <h4 class="billingAddress">Billing Address</h4>

    <form method="POST" autocomplete="off" id="auth-form">
        <input type="hidden" name="usertype" value="3" readonly="">
        <fieldset>      
            <input type="text" placeholder="Company Name " name="fullname" maxlength="30" required="required" id="id_username">
            <input type="text" placeholder="Contact Name" name="company" maxlength="30" required="required" id="id_company">        
            <input type="text" placeholder="Address1" name="email" maxlength="75" required="required" id="id_email">
            <input type="password" placeholder="Address2" name="password" maxlength="16" required="required" id="id_password">
            <input type="password" placeholder="Address3" name="repassword" required="required" id="id_repassword">
            <input type="text" placeholder="City " name="fullname" maxlength="30" required="required" id="id_username">
            <div class="controls"

Answer 1

#signup-modal, #login-modal {
width: 300px;
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border-radius: 10px 10px 10px 10px;
overflow: hidden;
margin-bottom: 40px;
box-shadow: 0px 1px 0px white inset;
padding: 0px 40px;
margin-left: auto;
margin-right: auto;
}

This worked in Firefox and Chrome.