您可以这样做：

当您寻找内容居中时，CSS有一个名为flex的漂亮类和一个名为justify-content：center；的属性来处理对齐。

更多关于Justify-content的信息

添加以下内容：

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

null

#todo {
  align-items: center;
  text-align: center;
}

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

#id-button {
  margin: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div id="todo">
  <p>
    <h3>
      Add New ToDo
    </h3>
    <div class="form-group">
      <div class="col-xs-4">
        <input type="text" class="form-control" placeholder="Add New ToDo Item">
        <button id="id-button" type="submit" class="btn btn-primary">
            Submit
            </button>
      </div>
    </div>
</div>

您可以将.form-group的css修改为下面的用户正确指向的css。Justify-content是解决这一问题的正确方法。

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

但是由于您使用bootstrap作为css框架。还可以在的开头添加