Flutter：如何让文本在容器内垂直水平居中？现有代码未实现垂直居中

问题原因 #

你遇到的视觉上文本未垂直居中，本质是两个因素导致：

• Text组件默认带有行高（leading），会在文本上下额外占据空间；
• 数字"1"的字形在多数字体中基于基线设计，本身不会完全垂直居中。

优化方案 #

方案1：简化布局+调整Text样式

直接利用Container的alignment属性实现外层居中，同时修改Text的行高和基线对齐，消除默认的上下冗余空间：

return Center(
  child: Container(
    color: Colors.white,
    width: 105,
    height: 105,
    alignment: Alignment.center, // 替代嵌套的Align组件
    child: Text(
      '1',
      style: TextStyle(
        fontSize: 100,
        height: 1, // 将行高设为1，移除默认上下间距
        textBaseline: TextBaseline.alphabetic,
      ),
    ),
  ),
);

方案2：用StrutStyle实现精准垂直居中

如果需要更严格的居中控制，可以通过StrutStyle强制文本的行高分布均匀：

return Center(
  child: Container(
    color: Colors.white,
    width: 105,
    height: 105,
    alignment: Alignment.center,
    child: Text(
      '1',
      style: TextStyle(
        fontSize: 100,
        strutStyle: StrutStyle(
          fontSize: 100,
          height: 1,
          leadingDistribution: TextLeadingDistribution.even,
        ),
      ),
    ),
  ),
);

方案3：保留绿色Container的居中方案

如果需要保留内层绿色Container，只需给它添加alignment属性，确保内部Text居中：

return Center(
  child: Container(
    color: Colors.white,
    width: 105,
    height: 105,
    alignment: Alignment.center,
    child: Container(
      color: Colors.green,
      alignment: Alignment.center, // 让绿色Container内部元素居中
      child: Text(
        '1',
        style: TextStyle(
          fontSize: 100,
          height: 1,
        ),
      ),
    ),
  ),
);

原代码问题分析 #

你原代码中的内层绿色Container没有设置尺寸和居中属性，它的大小由Text决定，但Text因默认行高和字体基线问题，内部文本并未在绿色Container内垂直居中，最终导致整体视觉上的偏移。

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