Html 对齐项目：居中，带标签和输入元素

我的React代码的一部分如下所示

<div className="register-input-row">
            <label className="register-label" htmlFor="name">Name</label>
            <input className="register-input" type="text" name="name" value={name} onChange={(e) => {
              this.setState({
                name: e.target.value
              });
            }}/>
          </div>

---

我想垂直对齐.register输入行的子行，但在css中我说display:flex；对齐项目：居中；结果就是将标签和输入向左推。如何使孩子们居中？

水平居中以保持原始位置和垂直：

.register-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

您应该使用flex-direction:column

div{ 显示器：flex； 对齐项目：居中； 弯曲方向：立柱； } 名称 {this.setState{name:e.target.value}；}}/> 你能粘贴React脚本生成的代码而不仅仅是React的这个片段吗；请阅读它们如何影响属性，如对齐项目和对齐内容。