Html 在页面上居中放置表单

我正试图让我的表格集中在桌面上。它现在在左边

我试着做了

display:block

和

marginleft:auto

和

marginright:auto

，但仍然很麻烦

下面的图片显示了这个问题，我将添加一个片段和一把小提琴来帮助解决。提前谢谢

Jsfiddle：

/*******表单CSS*************/
形式{
显示：块；
左边距：自动；
右边距：自动；
}
表格.联系人标签{
显示：块；
}
跨度{
显示：块；
边界：无；
颜色：白色；
}
.clearfix:之后{
内容：“；
显示：块；
明确：两者皆有；
}
字段集{
宽度：45%；
浮动：左；
边界：无；
}
输入。检查{
宽度：自动；
}
.左{
宽度：45%；
浮动：左；
}
.对{
宽度：45%；
浮动：对；
}
输入{
边界：无；
边框底部：2个实心#9595；
宽度：300px；
保证金：3倍；
颜色：#6C6A6A；
填充顶部：10px；
垫底：10px；
}
.底部{
边界：无；
保证金：3倍；
颜色：#6C6A6A；
填充顶部：10px；
垫底：10px；
宽度：300px；
}
法兰西{
右边距：10px；
}
传奇{
颜色：白色；
}
.按钮{
显示：内联块；
填充：15px 25px；
字体大小：14px；
光标：指针；
文本对齐：居中；
文字装饰：无；
大纲：无；
颜色：#fff；
背景色：#5959；
边界：无；
边界半径：15px；
盒影：0 9px#999；
宽度：150px；
}
.按钮：悬停{
背景色：#670809
}
.按钮：激活{
背景色：#670809；
盒影：0 5px#666；
变换：translateY（4px）；
}

学生复习3

“这门课是最新的技术，老师愿意多做一点，课程结构也很好”-蓝精灵爸爸

接触
个人信息

高中
大学生
毕业
联系方式

你的兴趣是什么

网页设计
网络开发
计算机科学
平面设计
用户体验
应用程序开发
跟进

您可以通过以下方式与我联系：


电话联系我
通过电子邮件与我联系
通过短信与我联系


我感兴趣的是：


大学生
毕业
在线 的

它不居中的原因是表单元素是块级容器，因此它占据了页面的100%宽度。因此，没有空间用于居中

正如你所写的：

我试着做了

display:block

和

marginleft:auto

和

marginright:auto

，但仍然很麻烦

好吧，如果你给一个元素

display:block

，它会消耗所有可用的水平空间。因此，

marginleft:auto

和

marginright:auto

没有效果

---

尝试为表单定义宽度（例如

宽度：30em

），删除浮动规则和/或使表单

文本对齐：居中，以使子元素居中。
要添加到Michael_B的答案中，默认情况下，表单设置为将页面的整个宽度作为其块元素，并且您也已对其进行了设置。“边距自动”仅适用于块元素或内联块元素，并且它们的宽度必须设置为指定值才能工作

现在，为了解决您的问题，查看您的源代码，您可以通过删除CSS中fieldset元素上的float集并将该元素中的Margin设置为auto来获得预期的结果。我不确定CSS规则中浮动的目的是什么，但不能将设置为浮动的内容居中。希望这有帮助，这里的问题不是你的
表单，而是你的
字段集。试试这个

fieldset {
  width: 45%;
  margin: 0 auto;
  /* float: left; -- DELETE float: left if you want this centered */
  border: none;
}

更新：

如果您还希望提交按钮居中，这里是css

.button {
  margin: 0 auto; /* ADDED THIS */
  display: block; /* Took inline-block out, just use block */
  padding: 15px 25px;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #595959;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 150px;
}

非常感谢您的详细介绍！在我读了你和Michael B的解释之后，这就更有意义了！我真的很感激！很乐意帮忙：）