使用Flexbox时如何实现输入框的垂直居中对齐？

嘿，我来帮你搞定这个垂直居中的问题！你之前尝试用vertical-align: middle没生效，其实不是外层Flexbox布局的锅，是这个CSS属性的适用场景你没摸准～

为什么vertical-align: middle没生效？ #

vertical-align: middle只对行内元素、行内块元素或表格单元格生效。你的.item是默认的块级元素，里面的label虽然设了display: inline-block，但它的垂直对齐是相对于当前行框的，没有容器级别的布局支撑，自然达不到你想要的整体垂直居中效果。

最优解决方案：给.item也加Flex布局 #

既然你已经在用Flexbox，直接把.item也变成Flex容器，就能轻松实现内部元素的垂直居中，代码修改如下：

修改后的CSS #

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center; /* 这行是让.item在水平方向居中，和内部垂直对齐无关 */
}
.item {
  background-color: orange;
  /* 新增以下两行，让.item内部元素垂直居中 */
  display: flex;
  align-items: center;
}
label {
  width: 100px;
  display: inline-block; /* 这个可以保留，或者删掉也不影响Flex布局下的宽度设置 */
}

完整HTML示例 #

<div class="container">
  <div class="item">
    <label>Gee my iefwaf fwats: </label>
    <input type="text" placeholder="输入内容">
  </div>
</div>

原理说明 #

给.item设置display: flex后，它的子元素（label和输入框）会变成Flex项目，align-items: center会让这些项目在Flex容器的交叉轴（这里因为Flex默认方向是row，交叉轴就是垂直方向）上居中对齐，完美解决你的需求。

备选方案：表格布局（不推荐，不如Flex灵活） #

如果你不想用Flex，也可以用表格布局实现：

.item {
  background-color: orange;
  display: table;
}
.item > * {
  display: table-cell;
  vertical-align: middle;
}

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