Why are login forms centered?

Question

Why are login forms always centered on the screen? Most horizontally, some vertically also. Sites like Apple/Amazon/Adobe/Microsoft/Google/PayPal/Instagram/Twitter etc. are all centered! Is this an undocumented best practice everyone unanimously decided to use?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Obviously it's most aesthetically pleasing, but is there any other reasons why?

Edit: Many of these sites do not support mobile either, so it wasn't done specifically for that.

Answer 1

There are actually quite a few other benefits to this approach, I'll just rattle off a few.

Ergonomics.

An often overlooked part of UI design, because we think of digital as not being (as) limited by the human body. But what's more comfortable, looking straight forward, or looking to either the left or the right? On phones, the middle of the screen is also considerably easier to reach than a side.

---

Focus

You want people to login, to look at your site. Centering the login creates as much buffer space as possible between the element you want used, and the world outside of the screen.

---

Consistency with other sites

Other sites do it, so you'll fit in nicely. While following the beaten path is not always the best option, in UX it can be good because it lowers the learning curve. This design is very archetypal, and people will instantly recognize the goal of the page and what to do next.

---

Consistency within variations

You can use the exact same layout for LTR and RTL text. You can load it on a phone or a PC and it will feel like the same layout. Equal whitespace fades into the periphery, but whitespace (or absence of it) on only one side makes a small or large site feel very different:

Answer 2

First of all

Why are login forms always centered on the screen?

They aren't. Some famous examples include Facebook, Stack Overflow, Office 365 (with the recent design change, they have centered their login form), Rediffmail, Yahoo (remember Yahoo!)

Symmetry

Symmetry is a phenomenon that is noticed throughout the universe. This makes the page look aesthetically pleasant, clean and keeps OCD at bay. Having anything center-aligned makes it easier to balance the layout which isn't very easy to do. Here's a good reference

Negative space

It's a concept that is used extensively by artists and photographers. Given that login forms generally are small, there's a lot of whitespace to deal with. Questions like how left is too left and how high is too to high get answered if the layout is center-aligned.

Responsive approach

Given that these sites would need to be made responsive at some point, squeezing and stretching from the center is comparatively easy.

Answer 3

Obviously it's most aesthetically pleasing, but is there any other reasons why?

That's pretty much it.

Centered aligned login layouts have more pleasing visual white space surrounding them, which is certainly more visually pleasing. Additionally, a small, center-aligned div means that the login form is generally easier to tweak for responsive design and mobile browsing.

Answer 4

There are many graphic design reasons why you'd want it centered, but it also draws attention. The screen center usually being the center of attention, being the assumption. Opening forms (dialogs) in the periphery of the user's field of view might mean they click the button and don't see an effect, so think the button doesn't work.

Also, if you are not logged in, you can't use the site.

If you look at some forums that can be used even when not logged in, many of them have a login form somewhere in the upper right, just two text fields, or as a popup from a "Log in" button.