使用 CSS 将字段集居中答案

【问题标题】：Center a field set with CSS使用 CSS 将字段集居中
【发布时间】：2018-10-18 22:33:31
【问题描述】：

我正在尝试将包含登录“用户名”和“密码”字段的字段集置于页面中心。这是我所拥有的：

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  float: left;
}

无论窗口大小如何，我都希望字段集在窗口中居中。谷歌搜索没有产生任何有用的信息，例如 float: center 或 align: center 属性。

【问题讨论】：

【解决方案1】：

没有float: center，只有左右。浮动只是允许块级元素通过将它们从堆栈流中取出来水平排列。它类似于display:inline-block，除了它将它们与浮动的方向对齐。

您想要的是将边距设置为自动。如果您想将fieldset 中的节点内部居中对齐，可以将text-align:center; 添加到此：

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin:auto;
}

【讨论】：

【解决方案2】：

包裹它的元素可能需要 text-align: center;就可以了，然后你需要在fieldset上设置边距；

fieldset{
  //other stuff
  margin: 0 auto;
  text-align: left;
}

form
{
    text-align: center;
}

【讨论】：

【解决方案3】：

只需删除float:left 并添加margin: 0 auto;，因为float:left 将您的元素保留在父元素的左侧。（假设父元素宽度超过 400px；）你的新 CSS 如下。

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin: 0 auto;
}

【讨论】：

【解决方案4】：

你也可以这样写fieldset：

<div style="text-align:center">
    .......fieldset here........
</div>

注意：这也会影响fieldset 文本的对齐方式，因此如果您希望fieldset 内的文本左对齐或右对齐，您可以使用：

<fieldset style="text-align:left">

【讨论】：

【解决方案5】：

有人试试这个...实际上，只要使用它就可以了！

fieldset {
  font-size:14px;    padding:5px;    width:500px;    line-height:1.8;    margin: 0 auto;    
 }

【讨论】：