如何设置<input type="text">输入框实现居中显示？

登录表单场景下常用的居中实现分水平居中、水平+垂直双向居中两类，直接按需选用对应代码即可：

方案1：Flex布局（推荐，适配绝大多数业务场景） #

直接给输入框的父级容器（包裹input的表单块、登录区容器）添加CSS样式，无需修改输入框本身属性，后续添加密码框、登录按钮等元素也可复用该布局规则：

• 仅需水平居中时：

.login-form {
  display: flex;
  justify-content: center;
}

• 需要登录区在页面水平+垂直双向居中（登录页最常用效果）时：

/* 若要整页居中，可将样式挂在body或最外层登录容器上 */
.login-form {
  display: flex;
  justify-content: center; /* 控制水平居中 */
  align-items: center; /* 控制垂直居中 */
  min-height: 100vh; /* 整页居中时需设置容器最小高度占满视口高度 */
}

方案2：margin自动居中（适合传统文档流布局） #

无需修改父容器样式，直接给输入框本身添加CSS即可，注意必须给输入框设置明确宽度，否则块级元素默认占满整行无法呈现居中效果：

input[type="text"] {
  display: block; /* 将输入框默认的inline-block属性转为块级，让margin:auto规则生效 */
  width: 260px; /* 按业务需求自定义输入框宽度，不可省略 */
  margin: 0 auto; /* 上下边距设为0，左右边距自动分配剩余空间实现水平居中 */
}

该方案仅支持水平居中，若需垂直居中可配合父容器内边距或定位属性调整。

方案3：Grid布局（代码最简洁） #

现代浏览器全支持的布局方案，给父容器添加极少量代码即可实现双向居中：

.login-form {
  display: grid;
  place-items: center;
  min-height: 100vh; /* 整页居中时添加 */
}

避坑提示：如果之前给输入框添加了float浮动属性，会导致元素脱离正常文档流，上述所有居中规则都会失效，调整居中前记得先清除浮动。

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