CSS Flex布局下如何对齐不同高度项实现图标居中、文本等高？

两个.benefits_item分别处于独立的栅格列容器内，各自高度由内部内容撑开，长文本项高度更高、短文本项高度更矮，因此两个文本区域无法保持统一高度。你当前给.benefits_item设置的align-items: center只能让单个item内部的图标和文本垂直居中，无法解决跨列的高度统一问题。

不需要修改现有HTML结构，仅调整CSS即可实现需求，推荐使用第一种方案，灵活性更高：

方案1：等高栅格实现（推荐） #

利用Bootstrap栅格row默认的flex特性，让两个栅格列保持等高，再让内部的item撑满列高度即可：

/* 新增：让栅格列成为flex容器，撑满row高度 */
.row .col-md-6 {
  display: flex;
}

.benefits .benefits_item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  min-height: 150px;
  width: 100%;
  height: 100%; /* 撑满栅格列高度，两个item自动对齐到最高项的高度 */
}

.benefits .benefits_item .benefits_round {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 25px;
  flex-shrink: 0; /* 防止长文本挤压圆形图标导致变形 */
  width: 116px;
  height: 116px;
  background: #1EACC7;
  border-radius: 50%;
}

.benefits .benefits_item .benefits_descr {
  width: 370px;
  max-width: 100%; /* 小屏幕下适配，避免文本溢出 */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  color: #202020;
}

.benefits .benefits_item .benefits_descr span {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 25px;
  color: #1EACC7;
}

该方案下，两个item会自动适配最高内容的高度，图标始终保持垂直居中，后续文本长度变化不需要手动调整高度值。

方案2：固定文本区最小高度 #

如果不想调整栅格默认样式，可以直接给文本区域设置匹配最长文本的最小高度，强制统一高度：

.benefits .benefits_item .benefits_descr {
  width: 370px;
  min-height: 120px; /* 该值根据实际最长文本的渲染高度调整即可 */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  color: #202020;
}

该方案改动量最小，但后续如果文本内容长度调整，需要同步修改min-height值，灵活性较差。

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