Центр div, содержащий контактную форму

Question

Как разместить контактную форму, находящуюся внутри div. Я пробовал margin:0 auto;, и это не сработало.

<div id="new_div_3"> 
     <form class="contact_form" action="#" method="post" name="contact_form"> 
      <ul> 
       <li> 
        <h2>Contact Us</h2> 
        <span class="required_notification">* Denotes Required Field</span> 
       </li> 
       <li> 
        <label for="name">Name:</label> 
        <input type="text" placeholder="John Doe" required /> 
       </li> 
       <li> 
        <label for="email">Email:</label> 
        <input type="email" name="email" placeholder="john_doe@example.com" required /> 
        <span class="form_hint">Proper format "name@something.com"</span> 
       </li> 
       <li> 
        <label for="website">Website:</label> 
        <input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/> 
        <span class="form_hint">Proper format "http://someaddress.com"</span> 
       </li> 
       <li> 
        <label for="message">Message:</label> 
        <textarea name="message" cols="40" rows="6" required ></textarea> 
       </li> 
       <li> 
        <button class="submit" type="submit">Submit Form</button> 
       </li> 
      </ul> 
     </form> 
    </div> 

Я попытался использовать различные методы, и ни один из них, похоже, не работает, чтобы центрировать div. Я даже попытался сосредоточиться на самой форме контакта, и он просто переместил поля ввода в центр контактной формы, а не div.

Answer 1

Для того, чтобы получить работу margin: 0 auto;, вам необходимо установить ширину.

#new_div_3 { 
    width: 500px; 
    margin: 0 auto; 
} 

Проверьте скрипку: http://jsfiddle.net/9cMAC/

Answer 2

#new_div_3 { 
    width:100%; 
    display:block; 
    margin:auto; 
} 

Должно быть все, что вам нужно.

Answer 3

Здесь вы идете:

#new_div_3 { 
margin: 0 auto; 
position: relative; 
width: 60%; 

}

проверка fiddle