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