Centre object on-screen using css only in GWT2.0 layout/uibinder world

Question

There are a few ways out there in the internet to centre something on the screen via css (-ve margins, table-cell hack etc). I was quite happy with that until now when I wanted to use native gwt2.0 layout panels/widgets. Imagine you want to do a "loading screen" to show a spinning circle until the app tries to figure out where to send user next (in background the app is checking if user is logged in or not).

I have this code in gwt uiBinder xml:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
         xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:with field='res' type='ru.atamur.resources.CommonBundle'/>

  <g:HTMLPanel>
    <g:Image resource='{res.loader}'/>
  </g:HTMLPanel>

</ui:UiBinder>

I basically want the image to be displayed in the center of the screen both vertically and horizontally.

Any bright ideas how to achieve that w/o scripting getWidth/setHeight etc?

Thanks.

Answer 1

In the end I was able to use general css with the help of HTMLPanel:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:with field='res' type='ru.atamur.resources.CommonBundle'/>

    <g:HTMLPanel>
        <div class="{res.centerStyle.container}">
            <p class="{res.centerStyle.centered}">
                <g:Image resource='{res.loader}'/>
            </p>
        </div>
    </g:HTMLPanel>

</ui:UiBinder>

where corresponding css (linked via a bundle) is:

.container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: table
}

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

the only hint here was to call ensureInjected in the corresponding widget constructor (see http://code.google.com/p/google-web-toolkit/issues/detail?id=4408 for details):

@UiField CommonBundle res;

public LoadingScreen() {
    initWidget(uiBinder.createAndBindUi(this));
    res.centerStyle().ensureInjected();
}