absolute-tables-016.html (1612B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: Abspos table centered in both axes with auto margins</title> 4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1480636"> 6 <link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"> 7 <meta name="assert" content="An absolutely-positioned fixed-size table should resolve auto margins the same way that a similarly-sized block would."> 8 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 9 <style> 10 .container { 11 /* I've chosen this position/size so that a 100px child element that's 12 centered within us will be placed at our "normal" position (where our 13 top-left corner would be, in the absence of relative positioning), so we 14 can use the simple filled-green-100px-square reference case. */ 15 position: relative; 16 left: -30px; 17 top: -30px; 18 width: 160px; 19 height: 160px; 20 } 21 .target { 22 display: block; 23 background: red; 24 } 25 .table { 26 display: table; 27 background: green; 28 } 29 .centered { 30 position: absolute; 31 width: 100px; 32 height: 100px; 33 inset: 0; 34 margin: auto; /* use auto margins for centering */ 35 } 36 </style> 37 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 38 <div class="container"> 39 <!-- We're essentially just comparing the position of the block ("target") 40 and the table. We expect them to be placed at precisely the same spot, 41 so no red should be visible. --> 42 <div class="centered target"></div> 43 <div class="centered table"></div> 44 </div>