Is there a way to center all the elements in st.metric?

Try this:

css='''
[data-testid="metric-container"] {
    width: fit-content;
    margin: auto;
}

[data-testid="metric-container"] > div {
    width: fit-content;
    margin: auto;
}

[data-testid="metric-container"] label {
    width: fit-content;
    margin: auto;
}
'''

# I usually dump any scripts at the bottom of the page to avoid adding unwanted blank lines
st.markdown(f'<style>{css}</style>',unsafe_allow_html=True)

image

2 Likes