How do I center this form in css?

Question

I have tried everything. I cannot get this centered on the screen. I am using ie 9 but it does the same in chrome. It just sits on the left of the webpage. Thank you for any help.

<style type="text/css">

body {
    margin:50px 0px; padding:0px;
    text-align:center;
    align:center;
}
label,input {
 display: block;
 width: 150px;
 float: left;
 margin-bottom: 10px;
}

label {
 text-align: right;
 width: 75px;
 padding-right: 20px;
}

br {
 clear: left;
}



    </style>
</head>


<body>

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

 <label for="name">Name</label>
 <input id="name" name="name"><br>

 <label for="address">Address</label>
 <input id="address" name="address"><br>

 <label for="city">City</label>
 <input id="city" name="city"><br>
 <input type="submit" name="submit" id="submit" value="submit" class="button" />

</form>
</body>

score 106 · Accepted Answer · edited May 17 '18 at 21:47

106

Another way

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

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

edited May 17 '18 at 21:47

Chloe

25,162
40
190
357

answered Nov 11 '11 at 17:43

Aleks Dorohovich

1,622
1
13
17

8

doesn't work, text-align: center applies to all children of the form, not the form itself – Cory Danielson Nov 11 '11 at 17:48
3

I get same results as @CoryDanielson in Chrome 25; form *content* is centered. – Jeromy French Feb 27 '13 at 22:00
8

I'm late, but you can wrap the form in a div and move `text-align: center;` to that parent div to have the entire form centered, not just the contents. – Luke3butler Nov 10 '14 at 14:54
5

The `text-align` has to be on the parent of the form. – Chloe May 17 '18 at 21:41
3

@CoryDanielson, try: `form { display: inline-block; text-align: left; }` – Mark Schneider Apr 17 '19 at 15:42

score 49 · Answer 2 · answered Jul 13 '15 at 14:36

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;
}

Cory Danielson · Answer 3 · 2012-07-01T00:26:42.853

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

score 18 · Answer 4 · edited Feb 03 '18 at 18:50

18

You can try

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

Or

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

edited Feb 03 '18 at 18:50

zamir

2,144
1
11
23

answered Nov 11 '11 at 17:41

tmjam

1,029
2
12
25

1

that will only move the form from the left by 25%.. unless the form is very wide, it will never be affected by margin-right: 25%, and width: 100% is default – Cory Danielson Nov 11 '11 at 17:50

score 6 · Answer 5 · answered Nov 11 '11 at 17:34

6

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.

answered Nov 11 '11 at 17:34

Peter Stuart

2,362
7
42
73

1

What is 985px? How did you come up with that number? – Alex Feinman Nov 11 '11 at 17:37
Sorry 985px would be the form width. That was just an example. You can change that width to whatever you like :) – Peter Stuart Nov 11 '11 at 17:38
2

Just make sure you have a defined width. The auto margins used to center will only work with a defined width in there. – Keefer Nov 11 '11 at 17:51
5

hardcoding widths is a dieing trend, you can just do `display: inline-block;` on the form itself, then center-align that – Cory Danielson Nov 11 '11 at 17:55
I have never known it to be a "dieing trend". I would call it a realiable trend, it works on all browsers and has done for years. With your suggestion you need to continuously set your text-align back to left for other elements which is more hassle – Peter Stuart Nov 11 '11 at 18:00
a fixed width isn't very flexible/liquid `body { text-align: left; }` and then `body > * { text-align: left; }` is pretty simple... – Cory Danielson Nov 11 '11 at 22:29

score 4 · Answer 6 · answered Jun 24 '21 at 17:56

4

You can try this code for your 'body' tag, change it as you like..

body {
    display: flex;
    justify-content: center;
    margin-top: 5%;
    align-items: center;
}

answered Jun 24 '21 at 17:56

Irfanuddin Hafidz

41
1

Idk what was wrong with my template, but this was the only answer that worked for me. No reason to force that margin-top though. Suggest that be removed from this answer. – Dan Hoover Jul 15 '21 at 11:25

score 3 · Answer 7 · answered Apr 20 '15 at 10:31

i dont know if the full resolution has been made for this yet. i know that from doing a 2 column page with fixed left side bar, to get a contact us form centered on my page i put the following:

    form {
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 display: inline-block;
 }

this worked for me so thought id throw in my resolution to the same problem

score 3 · Answer 8 · answered Jun 03 '21 at 08:04

3

This best solution I found online is using absolute positioning.

.login-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-49%, -49%);
    }

answered Jun 03 '21 at 08:04

Rhythm Shandlya

124
7

score 1 · Answer 9 · answered May 18 '13 at 02:42

I css I got no idea but I made that just by centering the form in html something like this:

in css:

form.principal {width:12em;}    
form.principal label { float:left; display:block; clear:both; padding:3px;}
form.principal input { float:left; width:8em;}
form.principal button{clear:both; width:130px; height:50px; margin-top:8px;}

then in html:

<center><form class="principal" method="POST">
<fieldset>
<p><label for="username">User</label><input id="username" type="text" name="username" />
<p><label for="password">Password</label><input id="password" type="password" name="password" /></p>
<button>Log in</button>
</fieldset>
</form></center>

This will center the form, and the content will be in the left of the centered form.

rodmclaughlin · Answer 10 · 2018-07-16T07:29:39.590

1

Normally, if you look up any software issue on stackoverflow, you quickly find a clear answer. But in CSS, even something as simple as "center a form" leads to a long discussion, and lots of failed solutions.

Correction: orfdorf's solution (above) works.

edited Jul 16 '18 at 07:29

answered Jul 16 '18 at 06:57

rodmclaughlin

371
3
8

2

This may be better suited to a comment on the actual answer, than a brand new answer – SeanS Jul 16 '18 at 07:42

score 1 · Answer 11 · answered May 09 '19 at 14:48

1

body {
    text-align: center;
}
form {
    width:90%;
    background-color: #c0d7f8;
}

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

answered May 09 '19 at 14:48

Sharm

75
1
9

score 1 · Answer 12 · edited Nov 05 '19 at 11:38

<!DOCTYPE html>
<html>
<head>
    <title>Private</title>

    <!-- local links -->
<style>


body{
    background-color:#6e6969;
    text-align:center;
}
body .form_wrapper{

    display:inline-block;
    background-color: #fff;
    border-radius: 5px;
    height: auto;
    padding: 15px 18px;
    margin: 10% auto;
    margin-left: auto;
    margin-right: auto;
} 
</style>
</head>
<body>
    <div class = "form_wrapper">
        <form method="post" action="function.php">
            <h1 class = "formHeading">Admin login form</h1>
            <input type = "text" name = "username" id = "username"placeholder = "Enter Username" required = "required">
            <input type = "password" name = "password" id  = "password" placeholder = "Enter password" required = "required">
            <button type = "submit" >Login</button>
            <a href = "#"> froget password!</a>
            <a href = "#"><span>?</span>help</a>
        </form>

    </div>
</body>


</html>

score 1 · Answer 13 · answered Dec 25 '20 at 22:21

Another solution (without a wrapper) would be to set the form to display: table, which would make it act like a table so it would have the width of its largest child, and then apply margin: 0 auto to center it.

form {
    display: table;
    margin: 0 auto;
}

Credit goes to: https://stackoverflow.com/a/49378738/7841955

Alan Ihre · Answer 14 · 2011-11-11T17:58:57.137

1

You can use the following CSS to center the form (note that it is important to set the width to something that isn´t 'auto' for this to work):

form {
   margin-left:auto;
   margin-right:auto;
   width:100px;
}

edited Nov 11 '11 at 17:58

answered Nov 11 '11 at 17:40

Alan Ihre

65
8

The width cannot be auto. This will align it to the left in some browsers (definitely FF) – Peter Stuart Nov 11 '11 at 17:52

score 0 · Answer 15 · answered Apr 21 '21 at 18:48

0

I had the same problem (i use google) What i did is i added the align attribute to the form

<form align="center">
   <!--Stuff-->
</form>

That is one solution

answered Apr 21 '21 at 18:48

Ebrahim Momin

11

Original poster requested CSS solution – Don Apr 21 '21 at 19:29
1

Yes, but it is "sort of" CSS enough. I gave an upvote for trying and because you are a New Contributor. Thanks Ebrahim. No offense Don. – johnny Apr 23 '21 at 18:18
Inline CSS should be avoided as much as possible. – navjotjsingh Aug 11 '22 at 11:35

score 0 · Answer 16 · answered May 07 '23 at 15:30

0

form {
text-align: center;
display: flex;
justify-content: center;
}

answered May 07 '23 at 15:30

jelouane alae

1

How do I center this form in css?

16 Answers16

Linked