CSS居中问题求助：输入框占位符垂直居中与按钮水平居中

解决placeholder与图标垂直居中 #

给包裹input和图标的容器添加flex布局，同时调整input的内边距和样式：

/* 假设你的输入框容器类是input-wrapper */
.input-wrapper {
  display: flex;
  align-items: center; /* 核心：让内部元素垂直居中 */
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
}

.input-wrapper .icon {
  margin-right: 8px; /* 图标和输入框之间留间距 */
}

.input-wrapper input {
  border: none;
  outline: none;
  flex: 1; /* 让输入框占满容器剩余空间 */
  padding: 8px 0; /* 用padding控制输入框高度，替代固定height */
  line-height: normal; /* 避免默认line-height导致错位 */
}

原理：flex布局的align-items: center会让容器内所有元素在垂直方向上居中对齐；用padding替代固定height，能让placeholder自动垂直居中，不会因为line-height设置不当错位。

解决提交按钮水平居中 #

分两种场景处理：

场景1：按钮父容器是普通块级元素

给按钮设置display: block和margin: 0 auto：

.submit-btn {
  display: block;
  margin: 15px auto 0; /* 上下间距+左右自动居中 */
  padding: 8px 24px;
}

场景2：按钮父容器用flex布局

给父容器添加justify-content: center：

.btn-container {
  display: flex;
  justify-content: center; /* 核心：让子元素水平居中 */
  margin-top: 15px;
}

如果你的原有代码中input设置了固定height，那需要把line-height设为和height一致，比如：

.input-wrapper input {
  height: 40px;
  line-height: 40px; /* 让placeholder垂直居中 */
}

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