如何实现注册表单Input自适应宽度且与Label居中、Label左对齐？

要实现整体居中、label左对齐、input自适应宽度的效果，无需固定宽度，只需调整.form-outline和.input的样式即可：

修改后的关键CSS代码： #

.form-outline {
  margin-bottom: 1.5rem;
  max-width: 600px; /* 可根据需求调整最大宽度，避免大屏幕下input过宽 */
  margin-left: auto;
  margin-right: auto;
}

.input {
  padding: 0.45rem;
  margin: 0.3rem 0 1.3rem 0;
  font-size: 1.25rem;
  border-radius: 0.5rem;
  display: block;
  width: 100%; /* 让input自动填满父容器宽度 */
  color: #212529;
  line-height: 1.5;
  border: 1px solid #ced4da;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

原理说明： #

1. 给.form-outline设置max-width限制最大宽度（替代固定宽度，兼顾不同屏幕适配），同时通过margin-left: auto; margin-right: auto;让整个容器水平居中。
2. 给.input设置width: 100%，让它自动填满父容器.form-outline的宽度，实现自适应效果。
3. label作为块级元素，会自动在.form-outline内左对齐，完全匹配你想要的布局。

之前尝试无效的原因： #

你之前用flex-direction: column加align-items: center会强制内部label和input都居中对齐，而float: left在flex容器中不生效。现在的方案是让容器本身居中，内部元素保持正常块级布局，自然就能实现label左对齐、input自适应宽度的需求。

内容的提问来源于stack exchange，提问作者user21022882