anchor-center-002-ref.html (1009B)
1 <!DOCTYPE html> 2 <title>Tests that 'anchor-center' behaves as 'center' in non-OOF layout modes</title> 3 4 <style> 5 .container { 6 width: 100px; 7 height: 100px; 8 background: orange; 9 margin-block: 5px; 10 } 11 12 .item { 13 width: 40px; 14 height: 40px; 15 background: lime; 16 } 17 18 .flex { 19 display: flex; 20 } 21 22 .grid { 23 display: grid; 24 grid-template-columns: repeat(8, 1fr); 25 grid-auto-rows: 50px; 26 grid-template-areas: 27 "a a a a b b b b" 28 "a a a a b b b b"; 29 } 30 </style> 31 32 <div class="flex container" style="align-items: center"> 33 <div class="item"></div> 34 </div> 35 36 <div class="flex container"> 37 <div class="item" style="align-self: center"></div> 38 </div> 39 40 <div class="grid container" 41 style="align-items: center; justify-items: center"> 42 <div class="item" style="grid-area: a"></div> 43 <div class="item" style="grid-area: b"></div> 44 </div> 45 46 <div class="grid container"> 47 <div class="item" style="grid-area: a; align-self: center"></div> 48 <div class="item" style="grid-area: b; justify-self: center"></div> 49 </div>