<!DOCTYPE html>

<style>
.container {
   background: grey;
   width: 200px;
   height: 100px;
}
.grid { display: grid; }
.flex { display: flex; }
.itemsCenter {
   align-items: center;
   justify-items: 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 itemsCenter">
    foobar
</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 itemsCenter">
    foobar
</div>