Html 无法将表单输入字段移动到中心

我正在尝试构建一个小的待办事项应用程序。我正试图将

输入

字段和提交按钮放置在中间，但对齐方式将转到左侧

#待办事项{
对齐项目：居中；
文本对齐：居中；
}
#待办事项组{
对齐项目：居中；
保证金：自动；
}
#id按钮{
利润率：10px；
}

添加新待办事项
提交

您可以执行以下操作：

当你寻找内容的中心时，CSS有一个漂亮的类叫做

flex

，还有一个属性叫做

justify content:center将负责对齐

更多关于

添加以下内容：

#todo .form-group {
 display: flex;
 margin: 0 auto;     
 justify-content: center;
}


#待办事项{
对齐项目：居中；
文本对齐：居中；
}
#待办事项组{
显示器：flex；
保证金：0自动；
证明内容：中心；
}
#id按钮{
利润率：10px；
}


添加新待办事项
提交
您可以按照下面用户的正确指示，将.form组的css修改到下面。证明内容是解决问题的正确方法

#todo .form-group {
  display: flex;
  margin: 0 auto;
  width: 100%;
  justify-content: center;
}

但是因为您使用引导作为css框架。您还可以将
作为第一个子项添加到
的开头。有关网格结构，请参阅引导文档
 
表单{
左边缘：25%；
右边距：25%；
宽度：50%；
}     

添加新待办事项
提交
关于您的代码，我有一些注意事项：


您的
标记没有结束符
尝试删除“表单组”和
class=“col-xs-4”
调整输入和输出标签的大小。
您的代码将符合您的要求

col-xs-4
和（我认为）
formgroup
都是引导类，它们覆盖了您试图执行的任何操作。因此，要么用不同的
包装代码，要么在CSS中覆盖它。另外，如果您想使用col类，您必须将该div用
“row”
类包装在另一个
中。
您的示例将它们放在中间，或者？你觉得呢mean@ajobi，检查底部的我的JSFIDLE链接。
form {
    margin-left: 25%;
    margin-right:25%;
    width: 50%;
}     

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
<div id="todo">
  <p>
    <h3>Add New ToDo</h3>
    <div class="form-group">
      <div class="col-xs-4">
       <form>
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">Submit</button>
       </form>
      </div>
    </div>
</div>