如何让Flex项目内容居中？Flex类表格内容垂直居中求助

嘿，折腾了好几个小时搞不定Flex居中确实挺闹心的，我来帮你梳理清楚解决方案～

一、让Flex Item中的内容居中 #

要让flex-item内部的内容（文本、元素都适用）同时实现水平+垂直居中，最稳妥的方式是把flex-item本身也变成Flex容器，具体步骤：

• 给目标flex-item添加以下CSS：

.your-flex-item {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

这种方法不管内容是单行文本、多行文本还是嵌套元素，都能完美居中，比line-height或position方案更通用。

如果你只需要水平居中，也可以直接用text-align: center（仅对文本/行内元素有效），但垂直居中还是得靠Flex的align-items。

二、类表格文本全局垂直居中（针对你的代码调整） #

看了你提供的代码，问题出在：你的.wrapper是Flex容器，但它的子元素（那些div）只是设置了固定高度，却没有配置内部内容的对齐规则。我们只需要给这些子元素加上Flex属性，就能实现全局垂直居中：

调整后的完整代码 #

.wrapper { 
  display: flex; 
  flex-wrap: nowrap; 
  background-color: silver; 
  border-top: 2px solid #000; 
} 
.wrapper>div { 
  height: 250px;
  /* 核心：让每个单元格变成Flex容器，控制内部内容对齐 */
  display: flex;
  align-items: center; /* 强制垂直居中，所有内容都生效 */
  justify-content: center; /* 默认水平居中 */
  /* 可选：加个内边距让文本不贴边 */
  padding: 0 1rem;
} 
.ct-title { 
  flex: 1 40%; 
  background: deepskyblue; 
  /* 单独调整这个单元格的水平对齐为左对齐 */
  justify-content: flex-start;
} 

关键说明： #

1. align-items: center：这是实现垂直居中的核心，它会让单元格内的所有内容（不管单行/多行文本、图片等）都垂直居中，完全适配你的需求。
2. 灵活调整水平对齐：默认给所有单元格设置justify-content: center实现水平居中，需要左对齐的.ct-title单独用justify-content: flex-start覆盖即可，其他单元格保持居中。
3. 移除了.wrapper里的text-align: center，因为现在用Flex的justify-content来控制水平对齐更灵活，也避免冲突。

这样调整后，你的类表格里所有内容都会垂直居中，个别列的水平对齐也能按需调整啦～

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