I have a form with a background how can I center it in the page?

Question

I want to center a form with a background to the center of the page, how can I go about doing that? I can't seem to find a way to properly place it in the middle of the screen with the form elements.

<div id="content" style="background-color: #e7e7e7;text-align: center; width:100%; height: 1000px; top: 360px; left:0px; padding-top: 100px; position: absolute; overflow: hidden;">
<form id="contact-form" action="contact.php" method="post" style="padding-top: 100px; list-style-type: none; text-align: center; width: 916px; height:660px;  background-image:url('../images/contact.png'); background-repeat: no-repeat;">
    <input type="hidden" name="redirect" value="/sent" />
    <ul>
        <li>
            <input type="text" name="name" class="name" value="" /> 
        </li>

        <li>
         <input type="text" name="company" class="company" value="" />
        </li>
    </ul>
</form>
</div>

What is your current CSS and HTML ? Try to make a [jsFiddle](http://jsfiddle.net/) — Brewal, Apr 02 '14 at 10:17
Is there any reason why you put the whole CSS in the HTML rather than a separated .css file ? — Brewal, Apr 02 '14 at 10:23
possible duplicate of [How to center a div in a div - horizontally?](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally) — Brewal, Apr 02 '14 at 10:24

Ankur Aggarwal · Accepted Answer · 2018-09-27T06:36:21.280

0

Give the margin auto for your left and right sides.

  #content{
    margin:0px auto
  }

edited Sep 27 '18 at 06:36

answered Apr 02 '14 at 10:24

Ankur Aggarwal

2,913
5
29
53

Don't encourage [duplicates](http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally?rq=1) – Brewal Apr 02 '14 at 10:25
@Brewal After reading the question, just wrote the answer. Will take care of it in future – Ankur Aggarwal Apr 02 '14 at 10:42

score 0 · Answer 2 · edited Apr 02 '14 at 10:46

0

<form id="contact-form" action="contact.php" method="post" 
style="padding-top: 100px; list-style-type: none; text-align: center; 
width: 916px; height:660px;  background-image:url('../images/contact.png'); 
background-repeat: no-repeat;"></form>

add

margin-left:auto; margin right:auto

along with the inline style inside form

edited Apr 02 '14 at 10:46

Blu

3,926
6
35
64

answered Apr 02 '14 at 10:36

Jijo Lopez

36
4

I have a form with a background how can I center it in the page?

2 Answers2