如何在Flexbox中居中对齐div并使文本对齐垂直基线？

要实现容器整体垂直居中，同时内部文本与指定垂直基线对齐，可以通过以下两种实用方法解决：

方法一：分层Flex布局（推荐，无需手动调整） #

通过两层Flex布局分离「容器居中」和「内部元素基线对齐」的需求：

1. 给容器的父元素设置Flex布局，实现容器本身的垂直+水平居中
2. 容器内部的Flex布局改用align-items: baseline，让内部文本/元素自动对齐基线

示例代码：

/* 父元素：负责让容器整体在页面居中 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

/* 容器：负责内部元素基线对齐 */
.box {
  display: flex;
  align-items: baseline;
  padding: 12px 16px;
  border: 1px solid #ddd;
}

/* 示例元素：不同字号的内容 */
.icon {
  font-size: 48px;
}
.text {
  font-size: 24px;
  margin-left: 8px;
}

<div class="box">
  <span class="icon">👋</span>
  <span class="text">Hello World</span>
</div>

方法二：单容器手动偏移（适合固定高度场景） #

如果容器需要固定高度，可通过给文本元素添加偏移来对齐基线：

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  border: 1px solid #ddd;
}

.icon {
  font-size: 48px;
}
.text {
  font-size: 24px;
  margin-left: 8px;
  /* 根据字号差手动调整偏移量，让基线对齐 */
  transform: translateY(5px);
}

问题根源 #

你之前直接给容器设置align-items: center，会让所有子元素垂直居中，但不同字号的文本基线本就不在同一水平线，因此需要把容器的内部对齐方式改成基线对齐，同时通过父元素布局实现容器本身的居中。

内容的提问来源于stack exchange，提问作者Alan Kałuża