wxPython 101: How to Center a Widget

I see this come up from time to time where people will ask how to center a widget in a window. The solution is actually quite easy. In most cases, you just need to nest a Horizontal BoxSizer inside of a Verticel BoxSizer with some spacers. In this article, I'll show you two three different ways to accomplish this task.

Using Faux Spacers

The first time I learned how to do this, I was told I could use a tuple for my spacer. The syntax looks a bit odd, but it works:

import wx

########################################################################
class MainFrame(wx.Frame):
    """"""

    #----------------------------------------------------------------------
    def __init__(self):
        """Constructor"""
        wx.Frame.__init__(self, None, title="Center the Button")
        panel = wx.Panel(self)
        
        h_sizer = wx.BoxSizer(wx.HORIZONTAL)
        main_sizer = wx.BoxSizer(wx.VERTICAL)
        
        btn = wx.Button(panel, label="Centered")
        h_sizer.Add(btn, 0, wx.CENTER)
        
        main_sizer.Add((0,0), 1, wx.EXPAND)
        main_sizer.Add(h_sizer, 0, wx.CENTER)
        main_sizer.Add((0,0), 1, wx.EXPAND)
        
        panel.SetSizer(main_sizer)
        
        self.Show()
        
if __name__ == "__main__":
    app = wx.App(False)
    frame = MainFrame()
    app.MainLoop()

Here we nest a horizontal sizer inside out top-level vertical sizer. But we surround the horizontal sizer with two "spacers" that happen to be tuples that have both their proportions set to 1 and the wx.EXPAND style flag set.

Using AddStretchSpacer

wxPython's sizer's include AddStretchSpacer, which is a nice convenience method that does basically the same thing as above. Let's take a look:

import wx

########################################################################
class MainFrame(wx.Frame):
    """"""

    #----------------------------------------------------------------------
    def __init__(self):
        """Constructor"""
        wx.Frame.__init__(self, None, title="Center the Button")
        panel = wx.Panel(self)
        
        h_sizer = wx.BoxSizer(wx.HORIZONTAL)
        main_sizer = wx.BoxSizer(wx.VERTICAL)
        
        btn = wx.Button(panel, label="Centered")
        h_sizer.Add(btn, 0, wx.CENTER)
        
        main_sizer.AddStretchSpacer(prop=1)
        main_sizer.Add(h_sizer, 0, wx.CENTER)
        main_sizer.AddStretchSpacer(prop=1)
        
        panel.SetSizer(main_sizer)
        
        self.Show()
        
if __name__ == "__main__":
    app = wx.App(False)
    frame = MainFrame()
    app.MainLoop()

You will note that the only difference here is using the AddStretchSpacer method along with its prop parameter set to 1.

Centering Without Nesting Sizers

One of my astute readers mentioned a third way to center the widget that does not require nesting the sizers. Let's take a look:

import wx

class MainFrame(wx.Frame):
    """"""

    #----------------------------------------------------------------------
    def __init__(self):
        """Constructor"""
        wx.Frame.__init__(self, None, title="Center the Button")
        panel = wx.Panel(self)

        main_sizer = wx.BoxSizer(wx.VERTICAL)

        btn = wx.Button(panel, label="Centered")
        main_sizer.AddStretchSpacer()
        main_sizer.Add(btn, 0, wx.CENTER)
        main_sizer.AddStretchSpacer()

        panel.SetSizer(main_sizer)

        self.Show()
        
if __name__ == "__main__":
    app = wx.App(False)
    frame = MainFrame()
    app.MainLoop()

Here we just create a vertical sizer, add a stretch spacer and then tell the button to be centered, then add another stretch spacer. The code is very similar to the previous example except that we don't use a horizontal sizer at all. Special thanks goes to Yoriz for mentioned this to me in the comments.