Gwt 如何垂直对齐&；水平对齐FlowPanel内的组件？

如中所述，谷歌表示，我们不应该使用HorizontalPanel和VerticalPanel进行布局，因为它可能存在一些浏览器不兼容的问题。谷歌建议改用FlowPanel

VerticalPanel通常可以被简单的FlowPanel替换（因为块级元素自然会垂直堆叠）

水平面板有点棘手。在某些情况下，您可以简单地将其替换为DockLayoutPanel，但这需要明确指定其子级的宽度。最常见的替代方法是使用FlowPanel，并使用float:left；它的子对象上的CSS属性。当然，您可以继续使用HorizontalPanel本身，只要您考虑到上述注意事项。

然而，我们现在遇到了另一个问题

如何在FlowPanel内垂直对齐和水平对齐组件

这不管用

<g:FlowPanel height="100%" addStyleNames="{res.css.alignMiddle}">
.alignMiddle{
    vertical-align:middle;
}

.中{
垂直对齐：中间对齐；
}

我尝试了

myFlowPanel.getElement（）.getStyle（）.setVerticalAlign（VerticalAlign.MIDDLE）但它也不起作用

<g:FlowPanel height="100%" addStyleNames="{res.css.alignMiddle}">
.alignMiddle{
    vertical-align:middle;
}

另外，另一种方法是在HTMLPanel中使用
html标记，但有些人说不同的浏览器可能会以不同的方式呈现gui，
中的小部件会引起一些怪癖。谷歌不建议在HTMLPanel中使用
，所以我们不应该使用

但是，那么：
如何在FlowPanel中垂直对齐和水平对齐组件？
我找到了一个解决方案

       <g:FlowPanel addStyleNames="{res.css.outer}">
           <g:FlowPanel addStyleNames="{res.css.alignMiddle}">
                       more widget here....
           </g:FlowPanel>
        </g:FlowPanel>

        .outer {
           display: table;
           height: 100%;
           width: 100%;
         }

         .alignMiddle{
            display: table-cell;
            vertical-align: middle;
            text-align:center;
          }


这里有更多小部件。。。。
.外部{
显示：表格；
身高：100%；
宽度：100%；
}
.中{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}