How do I center a widget in the middle of the screen in vanilla GWT?

Question

I wish to center a widget in the middle of the browser window (horizontally and vertically). I do not wish to stretch the widget to fill the root pane nor do I wish to use a popup window.

Is there a simple way this can be achieved?

Thanks,

Answer 1

You can do that programmatically as shown in the answer above, or you use CSS. To do it the CSS way, attach a style name to your widget first:

panel.setStyleName("style")

and in your application CSS file do the following:

.style {
    margin-left: auto;
    margin-right: auto;
}

That should centre the widget in your window.

Hope this helps!

Answer 2

Sorry to resurrect an old question, but the accepted answer does not address the entire question. The OP wanted to know how to center both horizontally and vertically.

Just apply the style:

width: 300px; //or some other width
height: 300px; //or some other height
margin: auto;

to your widget and make sure that the parent widget fills the entire window. One way to accomplish this would be to apply the following style to the parent (assuming the parent is a top level element):

height: 100%;
width: 100%;

Hope this helps someone who might stumble across this thread.