How to get this form to be in the center of the page horizontally

Question

I simply need the form to be within the center of the screen, and for its width to be 325px. Currently it is slightly to the left of the center. You can see here. The text that says "In the middle" is not directly in the center of the form.

How do I make the form centered horizontally no matter the viewport size?

Here is the form HTML:

<div class='form animated flipInX'>
  <h2>Sign up Today</h2>
  <form>
    <input placeholder='Your Email Address' type='text'>

    <button class='animated infinite pulse'>Let's Go!</button>
  </form>
</div>

and here's a codepen

Any suggested code changes is great, thanks!

Do any of [these answers](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically/19461564#19461564) help? — Josh Crozier, Feb 20 '15 at 03:45

rick jan cawaling · Accepted Answer · 2015-02-20T04:01:19.250

1

I just look at your code and change some.

YOUR CSS

 .form {
  position: absolute; // remove this one
  background: #fff;
  width: 325px;
  margin: -140px 0 0 -182px; // change this code to margin: 0 auto;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

TRY THIS CSS

.form {
  background: #fff;
  margin: 0 auto;
  width: 325px;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

JSFiddle! Hope it helps :)

edited Feb 20 '15 at 04:01

answered Feb 20 '15 at 03:54

rick jan cawaling

430
3
10

Thanks to both of you for your answers. I chose this one as the best because he was first and it also pushed the text beneath the form like I needed. – Nova Feb 20 '15 at 03:57

score 1 · Answer 2 · answered Feb 20 '15 at 03:56

Unless I'm missing something

change this rule:

margin: -140px 0 0 -182px;

to this:

margin: -140px 0 0 -200px;

So the total rule set for the .form class would be

  .form {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  width: 325px;
  margin: -140px 0 0 -200px;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

I have updated your codepen - http://codepen.io/anon/pen/MYVPNR

How to get this form to be in the center of the page horizontally

2 Answers2