输入框实现居中显示？" class="article-image" loading="lazy">
输入框居中实现方案 #登录表单场景下常用的居中实现分水平居中、水平+垂直双向居中两类，直接按需选用对应代码即可：
方案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