input 这种输入框怎么水平垂直居中，请各位指点一下，实在搜不到了

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 856 天前的主题，其中的信息可能已经有所发展或是发生改变。

Grid 布局，一行两列，两列都有 input 输入框。

怎么才能做到水平垂直居中，本职工作不忙，业余写着玩玩这家伙写的我一脑门子汗，

搜到的居中全都是文字内容居中，没找到有这种 input 的，我试了试也没成功

input

居中

垂直

门子

5 条回复 • 2022-08-02 07:50:46 +08:00

noe132

2022-08-01 21:16:00 +08:00

justify-items: center;

单行布局不是 flex 更好用么？写 flex-direction: column; align-items: center 也能实现一样的效果

horseInBlack

2022-08-01 21:30:51 +08:00

一行两列用 flex ，每列内部也用 flex

<div class="container">
<div class="left item">
姓名：<input type="text">
</div>
<div class="right item">
年龄：<input type="text">
</div>
</div>

.container{
width: 100%;
height:200px;
border:2px solid black;

display:flex;
}

.item{
flex:1;
display:flex;
justify-content:center;
align-items:center;
border:2px solid black;

}

input{
height:20px;
}

horseInBlack

2022-08-01 21:31:01 +08:00

https://codepen.io/mawing/pen/dymJraO

fox0001

2022-08-01 23:32:06 +08:00 via Android

直接 flex 解决

placeholder

2022-08-02 07:50:46 +08:00

@noe132
@horseInBlack
@horseInBlack
@fox0001

感谢感谢，我去写一下