The center allows you to horizontally center an element.
Before LayoutCSS, you had to create a flexbox with justify-content: center and create an element with a fixed max-width inside.
Now you just have to use a center component with a specified max-width value to achieve the same result.
The first example is really simple, here we create a center with a max-width of 500px and as you can see the element is centered and its width is 500px.
Hello world!
Here, the center does not have a max-width attribute, so it takes the width of its content.
Hello world!
If you want your text to be centered as well, just use the and-text attribute. All descendants (children and grand children) will have the same behavior!
Hello world!
The recursive attribute will center all child elements inside the center! However, grandchildren's and other descendants are not centered.
When you use recursive, the center become a flexbox and horizontally center its content.
Hello world!