How can I center this form?

Question

I made a login form that's perfectly horizontally centered for wide screens. Somehow, it's not the case with small screens, even though I used the viewport tag and margin: 0 auto;. What's wrong and how can I center it correctly?

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 27.5%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}

<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </fieldset>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

Here's my code: https://jsfiddle.net/gabwvf68

Looks centered to me? The horizontal scrollbar results from you not having changed to the `border-box` box-model. — connexo, Jun 06 '19 at 16:10
If it's vertical centering you're gonna have to take a look at flex-box — Dev Man, Jun 06 '19 at 16:11
Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — GalAbra, Jun 06 '19 at 16:13
OK, it looks like your inputs are pushing up the size of the fieldset to overflow the form. Your form is centred, but the fieldset is extending to the right. Put a `display:none` property on your inputs and it no longer happens. — Euan Smith, Jun 06 '19 at 16:22
So, you need to do something about the input size to fix it. — Euan Smith, Jun 06 '19 at 16:23
@connexo - the form horizonally decentres as you shrink the containing window (at least it does on Chrome and Firefox anyway) — Euan Smith, Jun 06 '19 at 16:25

score 2 · Accepted Answer · answered Jun 06 '19 at 16:28

2

This is your problem area:

    fieldset {
      border: 1px groove black;
      border-radius: 5px;
    }

    form {
      font-family: Segoe UI;
      margin: 0 auto;
      margin-top: 15%;
      width: 27.5%;
    }

We can fix it simply by doing:

    fieldset {
      border: 1px groove black;
      border-radius: 5px;
      width: 27.5%;
      margin: 0 auto;
    }

    form {
      font-family: Segoe UI;
      margin-top: 15%;
    }

Move the width and margin: 0 auto; to the fieldset.

margin 0 auto; should always go on the block you are trying to center not the parent block.

answered Jun 06 '19 at 16:28

James Wasson

514
3
6

Good catch - you got there before me. – Euan Smith Jun 06 '19 at 16:32
That fixed it, thanks. What I wanted to center though, was indeed the form and not the fieldset but another comment made me realize that the fieldset was overflowing due to the inputs and buttons having a fixed width, which caused the offset for smaller screens. – l1chorpe Jun 08 '19 at 15:18

score 1 · Answer 2 · answered Jun 06 '19 at 16:18

You form has the width in percent is smaller that the fieldset area. Hence when you resize the window to smaller size it moves right to get the remaining wind of the window. Try giving fix width or the width as much as fieldset element width.

Like below I gave width:55% and it works fine for all window size. If you want the box width as given in the example, try giving it width:300px

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 55%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}

<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </fieldset>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

Thanks for the explanation. I just forgot to give a relative size to the buttons and inputs instead of the default fixed one. — l1chorpe, Jun 08 '19 at 15:22

Alessi 42 · Answer 3 · 2019-06-06T16:27:12.290

Your issue lies with the use of the <fieldset> tag which even though the parent form is correctly sized and centred the fieldset child does not display to this size.

One way around this if you do not require the fieldset tag is to use a div with the class fieldset.

You should probably also include a width: 100% attribute to the input fields so that they remain within the input form.

Example

html,
body {
  width: 100%;
}

body {
  text-align: center;
}

.fieldset {
  border: 1px groove black;
  border-radius: 5px;
}

form {
  font-family: Segoe UI;
  margin: 0 auto;
  margin-top: 15%;
  width: 27.5%;
}

input {
  border: 1px rgb(175, 175, 175) solid;
  border-radius: 5px;
  font-family: Helvetica;
  font-size: 100%;
  width: 100%;
  margin-top: 2.5%;
  padding: 1% 0% 1% 0%;
}

legend {
  font-size: 150%;
}

button {
  background-color: rgb(0, 117, 255);
  border: 0px;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

button:hover {
  background-color: rgb(0, 83, 255);
  transition: background-color 0.15s ease-in;
}

button#submit {
  font-size: 100%;
  margin-top: 7%;
  padding: 2.5% 10% 2.5% 10%;
}

button#signup {
  font-size: 100%;
  margin-top: 1%;
  padding: 0.6% 2.5% 0.6% 2.5%;
}

<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>
  <title>Login</title>
  <link rel="stylesheet" href="css/login.css">
</head>

<body>
  <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
    <div class="fieldset">
      <legend>Login</legend>
      <p>
        <label for="username">Username</label><br>
        <input type="text" id="username" name="username">
      </p>
      <p>
        <label for="password">Password</label><br>
        <input type="password" id="password" name="password">
      </p>
      <p>
        <button type="submit" id="submit">Log in</button>
      </p>
    </div>
  </form><br>
  <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>

</html>

Hope this helps!

score 0 · Answer 4 · answered Jun 06 '19 at 16:32

your form is actually centered, but in small screen, form content (fieldset, input etc.) kind of overflows your form area. you can visualize this by temporarily adding background-color to the form. In order to fix this, try setting larger width of form for smaller screen. Also, use px value for width instead of %, if possible

How can I center this form?

4 Answers4