Question

我只需要将表单放在屏幕的中心，并且宽度为325px。目前它位于中心的左侧。你可以看到here。文字说＆＃34;在中间＆＃34;并不直接位于表格的中心。

无论视口大小如何，如何使表格水平居中？

以下是表单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>

这里是codepen

任何建议的代码更改都很棒，谢谢！

Answer 1

我只看你的代码并改变一些。

您的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);
}

尝试使用CSS

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

JSFiddle！希望它有所帮助：）

Answer 2

除非我遗漏了什么

更改此规则：

margin: -140px 0 0 -182px;

到此：

margin: -140px 0 0 -200px;

因此.form类的总规则集将是

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

我已更新您的codepen - http://codepen.io/anon/pen/MYVPNR

如何使此表单水平位于页面的中心

2 个答案: