How do I center this form in css?

Another way

body {
    text-align: center;
}
form {
    display: inline-block;
}

<body>
  <form>
    <input type="text" value="abc">
  </form>
</body>

Wrap your form in a div.
Set the div's display to block and text-align to center (this will center the contained form).
Set the form's display to inline-block (auto-sizes to content), left and right margins to auto (centers it horizontally), and text-align to left (or else its children will be center-aligned too).

HTML:

<div class="form">
    <form name="Form1" action="mypage.asp" method="get">
        ...
    </form>
</div>

CSS:

div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

body { text-align: center; }
     /* center all items within body, this property is inherited */
body > * { text-align: left; }
     /* left-align the CONTENTS all items within body, additionally
        you can add this text-align: left property to all elements
        manually */
form { display: inline-block; }
     /* reduces the width of the form to only what is necessary */

http://jsfiddle.net/sqdBr/4/

Works & tested in Chrome/IE/FF

You can try

form {
    margin-left: 25%;
    margin-right:25%;
    width: 50%;
}

form {
    margin-left: 15%;
    margin-right:15%;
    width: 70%;
}

Try adding this to your css

.form { width:985px; margin:0 auto }

and add width:100% to the body tag

Then put:

<div class="form">

before the tag.

How do I center this form in css?

Related

Recent Posts