Align Button To The center Of the window using pysimplegui

Question

In my application am trying to place my button,text and input at the center of the window.I am using PySimpleGUI for designing buttons.For aligning to the center i used justification='center' attribute on my code.But still it is not fitting to the center of the window.

The code am working with is

import PySimpleGUI as sg
from tkinter import * 
sg.theme('DarkAmber')  
layout = [ 
        [sg.Text('Enter the value',justification='center')],
        [sg.Input(justification='center')],
        [sg.Button('Enter','center')]
     ]


  window = sg.Window('My new window', layout, size=(500,300), grab_anywhere=True)

 while True:
event, values = window.read()   # Read the event that happened and the values dictionary
print(event, values)
if event == sg.WIN_CLOSED or event == 'Exit':     # If user closed window with X or if user clicked "Exit" button then exit
    break
if event == 'Button':
  print('You pressed the button')
window.close()

The above code outputs How can i make the text,button and input to the center of the window?

Answer 1

I think this is what you're looking for

window = sg.Window('My new window', layout, element_justification='c')

---

Edit - Centering vertically (SEE MARCH 2022 edit below for a BETTER solution)

Centering a layout vertically in a window is quite a bit bigger of a chore. What's required are 2 elements that will expand when the window expands. This is a demo program that is part of the Demos on the PySimpleGUI GitHub

import PySimpleGUI as sg

"""
    Center a column in a window
    Solves a very specific kind of layout.
    If you want to have something centered in a Window, this is a good way to do it
    The "trick" here is:
        * the first row of the layout has a Text element that expands vertically
        * the row with the Column has a text element that expands horizontally
    
    This expanding Text element is what will cause the Column element to be centered

    Used with permission
"""

def main():
    column_to_be_centered = [  [sg.Text('My Window')],
                [sg.Input(key='-IN-')],
                [sg.Text(size=(12,1), key='-OUT-')],
                [sg.Button('Go'), sg.Button('Exit')]  ]

    layout = [[sg.Text(key='-EXPAND-', font='ANY 1', pad=(0, 0))],  # the thing that expands from top
              [sg.Text('', pad=(0,0),key='-EXPAND2-'),              # the thing that expands from left
               sg.Column(column_to_be_centered, vertical_alignment='center', justification='center',  k='-C-')]]

    window = sg.Window('Window Title', layout, resizable=True,finalize=True)
    window['-C-'].expand(True, True, True)
    window['-EXPAND-'].expand(True, True, True)
    window['-EXPAND2-'].expand(True, False, True)

    while True:             # Event Loop
        event, values = window.read()
        print(event, values)
        if event == sg.WIN_CLOSED or event == 'Exit':
            break
        if event == 'Go':
            window['-OUT-'].update(values['-IN-'])
    window.close()

if __name__ == '__main__':
    main()

---

Edit 18-Mar-2022

Like so many things in PySimpleGUI, operations like element justification are continually evolving. The problem, again, with StackOverflow is that these answers are not typically updated. It's why I suggest always using the GitHub Issues to ask questions and to check the Cookbook, eCookbook and Demo Programs to get the latest techniques.

Last year two new elements were introduced that make both horizontal and vertical justification trivial. These elements are Push and VPush. You'll find a recipe in the eCookbook.

These elements "push" other elements around. Push moves them horizontally and VPush moves them vertically.

If you put a push on both sides of elements/rows, then those elements/rows will be centered.

Here's the same layout in the above example except using these Push and VPush elements. This solution is much shorter & much easier to understand.

import PySimpleGUI as sg

def main():
    column_to_be_centered = [  [sg.Text('My Window')],
                [sg.Input(key='-IN-')],
                [sg.Text(size=(12,1), key='-OUT-')],
                [sg.Button('Go'), sg.Button('Exit')]]

    layout = [[sg.VPush()],
              [sg.Push(), sg.Column(column_to_be_centered,element_justification='c'), sg.Push()],
              [sg.VPush()]]

    window = sg.Window('Window Title', layout, size=(500,300))

    while True:
        event, values = window.read()
        if event == sg.WIN_CLOSED or event == 'Exit':
            break

    window.close()


if __name__ == '__main__':
    main()

Answer 2

this code make the text, button and input to the center of the window.

import PySimpleGUI as sg
sg.theme('DarkAmber')  
layout = [ 
        [sg.Text('Enter the value',justification='center',size=(100,1))],
        [sg.Input(justification='center',size=(100,1))],
        [sg.Button('Enter','center',size=(100,1))]
     ]


window = sg.Window('My new window', layout, size=(500,300), grab_anywhere=True)

while True:
    event, values = window.read()   # Read the event that happened and the values dictionary
    print(event, values)
    if event == None or event == 'Exit':     # If user closed window with X or if user clicked "Exit" button then exit
        break
    if event == 'Button':
      print('You pressed the button')
    window.close()