html表单和css：无法居中项目

Question

我有一些麻烦以html格式居中项目。这里有一个非常简单的例子：

https://jsfiddle.net/a9cnuypz/

＆＃13;

＆＃13;

#rectLogin {
  margin: auto;
  width: 60%;
  border-style: solid;
  border-width: 1px;
}
#formLogin {
  margin: auto;
  width: 60%;
  display: inline-block;
}
#btn {
  margin: auto;
  display: inline-block;
  width: 200px;
}

＆＃13;

<div id="rectLogin">
  <form id="formLogin">
    <div>
      <label>Username</label>
      <fieldset>
        <input type="text" name="username" required>
      </fieldset>
      <label>Password</label>
      <fieldset>
        <input type="password" name="password" required>
      </fieldset>
      <input id="btn" type="submit" value="Login">
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是现在的结果：

这就是我想要的：

我不明白我的错误。我为相关项目（表单和按钮）设置了宽度和边距=自动。

Answer 1

将display: block;设为#formLogin和#btn

#formLogin {
    margin: auto;
    width: 60%;
    display: block;
}

#rectLogin {
  margin: auto;
  width: 60%;
  border-style: solid;
  border-width: 1px;
}

#formLogin {
  margin: auto;
  width: 60%;
  display:block;
}

#btn {
  margin: auto;
  display:block;
  width: 200px;
}

<div id="rectLogin">
  <form id="formLogin">
    <div>
      <label>Username</label>
      <fieldset>
        <input type="text" name="username" required>
      </fieldset>
      <label>Password</label>
      <fieldset>
        <input type="password" name="password" required>
      </fieldset>
      <input id="btn" type="submit" value="Login">
    </div>
  </form>
</div>

Answer 2

中的文字对齐中心

 #rectLogin 

并在

中设置显示块和文本对齐

#formLogin

＆＃13;

＆＃13;

#rectLogin {
  margin: auto;
  width: 60%;
  border-style: solid;
  border-width: 1px;
  text-align:center;
}

#formLogin {
  margin: auto;
  width: 60%;
  display: block;
  text-align: left;
}


#btn {
  margin: auto;
  display: block;
  width: 200px;
}

＆＃13;

<div id="rectLogin">
  <form id="formLogin">
    <div>
      <label>Username</label>
      <fieldset>
        <input type="text" name="username" required>
      </fieldset>
      <label>Password</label>
      <fieldset>
        <input type="password" name="password" required>
      </fieldset>
      <input id="btn" type="submit" value="Login">
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;