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

[placeholder]

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

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

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

[noe132]

justify-items: center;

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

[horseInBlack]

一行两列用 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]

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

[fox0001]

直接 flex 解决

[placeholder]

@noe132
@horseInBlack
@horseInBlack
@fox0001

感谢感谢，我去写一下