| OLD | NEW | 
|   1 <!DOCTYPE html> |   1 <!DOCTYPE html> | 
|   2  |   2  | 
|   3 <style> |   3 <style> | 
|   4 .container { |   4 .container { | 
|   5    background: grey; |   5    background: grey; | 
|   6    width: 200px; |   6    width: 200px; | 
|   7    height: 100px; |   7    height: 100px; | 
|   8 } |   8 } | 
|   9 .grid { display: grid; } |   9 .grid { display: grid; } | 
|  10 .flex { display: flex; } |  10 .flex { display: flex; } | 
|  11 .itemsCenter { |  11 .itemsCenter { | 
|  12    align-items: center; |  12    align-items: center; | 
|  13    justify-items: center; |  13    justify-items: center; | 
|  14 } |  14 } | 
|  15 </style> |  15 </style> | 
|  16  |  16  | 
|  17 <p>Grid item created as anonymous box to contain the text element. The text elem
    ent should be centered in both axis due to the Default Alignment 'center' value 
    on its container.</p> |  17 <p>Grid item created as anonymous box to contain the text element. The text elem
    ent should be centered in both axis due to the Default Alignment 'center' value 
    on its container.</p> | 
|  18 <div class="container grid itemsCenter"> |  18 <div class="container grid itemsCenter"> | 
|  19     foobar |  19     foobar | 
|  20 </div> |  20 </div> | 
|  21  |  21  | 
|  22 <p>Flex item created as anonymous box to contain the text element. The text elem
    ent should be centered in both axis due to the Default Alignment 'center' value 
    on its container.</p> |  22 <p>Flex item created as anonymous box to contain the text element. The text elem
    ent should be centered in cross axis due to the Default Alignment 'center' value
     on its container.</p> | 
|  23 <div class="container flex itemsCenter"> |  23 <div class="container flex itemsCenter"> | 
|  24     foobar |  24     foobar | 
|  25 </div> |  25 </div> | 
| OLD | NEW |