| <!DOCTYPE html> |
| |
| <style> |
| .container { |
| background: grey; |
| width: 200px; |
| height: 100px; |
| } |
| .grid { display: grid; } |
| .flex { display: flex; } |
| .selfCenter { |
| align-self: center; |
| justify-self: center; |
| } |
| </style> |
| |
| <p>Grid item created as anonymous box to contain the text element. The text element should be centered in both axis due to the Default Alignment 'center' value on its container.</p> |
| <div class="container grid"> |
| <div class="selfCenter">foobar</div> |
| </div> |
| |
| <p>Flex item created as anonymous box to contain the text element. The text element should be centered in cross axis due to the Default Alignment 'center' value on its container.</p> |
| <div class="container flex"> |
| <div class="selfCenter">foobar</div> |
| </div> |
