html - 如何将带有字段集的表单居中在div内？

Question

我正在尝试创建一个看起来像我制作的这个线框的表单

虽然我现在在这里

我的代码如下

HTML

<div id="accountRequest">
  <form>
    <fieldset>
      <legend>Please sign up here </legend>
      <label>First Name</label>
      <input type="text" />
      <label>Last Name</label>
      <input type="text" />
      <label>Display Name</label>
      <input type="text" />
      <label>Password</label>
      <input type="text" />
      <label>Tell us about yourself (optional)</label>
      <textarea rows="3"></textarea>   
      <label>Email</label>
      <input type="text" />
      <div>
      <button class="btn btn-primary">Create Account</button>
    </div>
  </fieldset>
</form>

CSS

#accountRequest {
  background-color:#fff;
  border-radius:3px;
  width:330px;
  border: 1px #333 solid; 
}
#accountRequest form { 
  width:282px; 
}
#accountRequest fieldset { border-radius:3px;
  max-width: 300px;
}
#accountRequest form input, 
#accountRequest form textarea { 
  width: 300px; 
}

不是使用 css 将表单居中的副本，因为该地址在整个页面中居中。

也不是Center a div 包含联系表单的副本，因为该表单不包含字段集。而且这里的字段集似乎出现了一些意想不到的问题。

Answer 1

不确定您是否已将其整理出来，但我已将宽度更改为百分比。与固定像素相比，我认为这些会更好。我使用 margin: 0 auto 将整个表单及其元素居中

#accountRequest {
  background-color:#fff;
  border-radius:3px;
  width:100%;
  border: 1px #333 solid; 
}
#accountRequest form { 
  width: 60%;
  margin: 0 auto;
}
#accountRequest fieldset { 
 border-radius:3px;
 width: 100%;
}
#accountRequest form input, 
#accountRequest form textarea { 
  width: 100%; 
}

Answer 2

看起来你的输入太宽了。尝试：

#accountRequest form input,
#accountRequest form textarea { 
   width: 100%; 
}

Answer 3

显然这效果最好，但仍然看起来很老套。

#accountRequest {
  background-color:#fff;
  border: 1px #333 solid; 
  border-radius:3px;
  height:540px;
  width:360px;
}
#accountRequest form { 
  margin: auto;
  position: relative;
  width: 96%;
}
#accountRequest fieldset { border-radius:3px; }
#accountRequest form label { margin:auto; width:100%; }
#accountRequest form input, 
#accountRequest form textarea { margin:auto; width: 96%; }