[docs] Horizontal centering example doesn't work in codesandbox

In the documentation, the example for “Horizontal centering” apparently works there, but if you try it on Codesandbox or Stackblitz, the text is left-justified.

The problem can be corrected by adding style={{display:"flex"}} to the surrounding div tag, or replacing it with <Box display="flex">. I found that out in a Medium post.

In general, it is a confusing issue of why mx="auto" works in some places and not others, and some explanation would be helpful.

I have been able to use the align property of <Grid>, but it does not seem be documented; presumably it’s just a synonym for alignItems.

While I’m at it, there was no obvious option for documentation issues, so I submitted it here.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The “Centered element” text is not centered if you follow the Codesandox link from the doc page above. I had the same experience with the “Edit in Stackblitz.”

Expected Behavior 🤔

It should be centered.

Steps to Reproduce 🕹

Steps:

1. Use links above.

Context 🔦

Trying to center a button within a Grid item, and various other centering problems.

Your Environment 🌎

Running in Chrome browser.

[viditrv123]

I have made few changes that might be correct. Please check #25787

[natkuhn]

Oddly, when I go to the example now, the background of every example has changed, so that the rectangular box no longer appears.