ProgressBar and RenderTo not placing in the center

I am creating a progressBar dynamically while processing some work. It works but I am using the RenderTo method, and it doesn't appear in the center of the container.

here is my code

        var progressBar = Ext.create('Ext.ProgressBar', {
            renderTo: that.el,
            width: 305
        });

The width is correct, but its not rendered in the center of the container (that.el)

The container isn't a fixed size so I can't really add padding / margin as I would be unsure of the amount.

Anyone know a way around this ?

I am using an example of RenderTo, is there an alternative way to ensure that its added to the container and centered ?

Solution

var progressBar = Ext.create('Ext.ProgressBar', {
        renderTo: that.el,
        style: 'margin-left: auto; margin-right: auto',
        width: 305
    });

This will probably work, but I'm unaware of the rest of your application's layout.

If you are full Extjs app, you should make "that.el" a container of some sort and handle this via layouts.

Ex: HBox layout with pack/align settings to center your items.