How can i vertical-align & horizontal-align components inside a FlowPanel?

Question

As stated in http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html, Google said we should not use HorizontalPanel & VerticalPanel to make layouts since it can have some browser incompatibility problems. Google suggests to use FlowPanel instead.

VerticalPanel can usually be replaced by a simple FlowPanel (since block-level elements will naturally stack up vertically).

HorizontalPanel is a bit trickier. In some cases, you can simply replace it with a DockLayoutPanel, but that requires that you specify its childrens' widths explicitly. The most common alternative is to use FlowPanel, and to use the float: left; CSS property on its children. And of course, you can continue to use HorizontalPanel itself, as long as you take the caveats above into account.

However, we now run into another problem.

How to vertical-align & horizontal-align components inside a FlowPanel?

This doesn't work.

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

I tried myFlowPanel.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE); but it also doesn't work.

Also, another approach is to use <table> html tag inside a HTMLPanel, but some people said different browsers may render gui differently the widgets inside <table> causing some quirks. Google doesn't suggest to use <table> inside a HTMLPanel, so we shouldn't use.

But, then: How to vertical-align & horizontal-align components inside a FlowPanel?

Answer 1

i found a solution

       <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;
          }