如何在TMS WEB Core中实现FireMonkey HorzCenter的面板水平居中效果？

方法1：CSS Margin Auto方案（Web原生实现） #

适合需要固定宽度的面板，直接利用Web布局特性：

• 给目标面板（如TPanel）设置固定宽度（例如Width := 800）
• 在面板的Style属性中添加以下样式，实现水平居中+高度占满：

  margin-left: auto; margin-right: auto; height: 100%;
  

  也可以通过代码动态设置：

  Panel1.ElementHandle.style.setProperty('margin-left', 'auto');
  Panel1.ElementHandle.style.setProperty('margin-right', 'auto');
  Panel1.ElementHandle.style.setProperty('height', '100%');
  

方法2：TLayout容器布局 #

利用TMS WEB Core的布局组件实现灵活控制：

• 新建一个TLayout，将其Align设为alClient（占满父控件）
• 将目标面板的Align设为alNone，设置固定宽度
• 给面板设置HorizontalAlign为haCenter，VerticalAlign为vaStretch（自动占满父容器高度）
• 确保面板的LayoutParent指向该TLayout

方法3：动态计算位置（精确控制场景） #

通过父容器的 resize 事件手动计算居中位置：

procedure ParentContainerResize(Sender: TObject);
begin
  // 计算水平居中的Left值：(父容器宽度 - 面板宽度) / 2
  Panel1.Left := (ParentContainer.Width - Panel1.Width) div 2;
  // 让面板高度占满父容器
  Panel1.Height := ParentContainer.Height;
end;

记得在窗体创建时绑定该事件，并初始调用一次确保位置正确。

注意事项 #

• 若父容器存在padding或边框，计算位置时需额外扣除对应空间
• 使用CSS方案时，父容器默认的static定位不影响auto margin生效，若父容器为flex布局可调整justify-content属性辅助居中

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