page-box-004-print-ref.html (1686B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 500px; 6 margin: 0; 7 } 8 @page larger { 9 size: 500px 800px; 10 } 11 @page smaller { 12 size: 400px 300px; 13 } 14 :root { 15 print-color-adjust: exact; 16 } 17 body { 18 margin: 0; 19 } 20 .pagebox { 21 display: flow-root; 22 } 23 .pagebox > div { 24 border: 10px solid lightblue; 25 } 26 .pagebox > div > div { 27 background: yellow; 28 } 29 .normalpage { 30 page: normal; 31 height: 500px; 32 } 33 .normalpage > div { 34 margin: 25px 50px 75px 100px; 35 padding: 100px 75px 50px 25px; 36 } 37 .normalpage > div > div { 38 height: 230px; 39 } 40 .largerpage { 41 page: larger; 42 height: 800px; 43 } 44 .largerpage > div { 45 margin: 40px 50px 120px 100px; 46 padding: 160px 75px 80px 25px; 47 } 48 .largerpage > div > div { 49 height: 380px; 50 } 51 .smallerpage { 52 page: smaller; 53 height: 300px; 54 } 55 .smallerpage > div { 56 margin: 15px 40px 45px 80px; 57 padding: 60px 60px 30px 20px; 58 } 59 .smallerpage > div > div { 60 height: 130px; 61 } 62 </style> 63 <div class="pagebox normalpage"> 64 <div> 65 <div> 66 On every page, the yellow rectangle should be centered within the page box 67 (the white area). (The lightblue rectangle should not be centered.) 68 </div> 69 </div> 70 </div> 71 <div class="pagebox normalpage"> 72 <div> 73 <div></div> 74 </div> 75 </div> 76 <div class="pagebox largerpage"> 77 <div> 78 <div></div> 79 </div> 80 </div> 81 <div class="pagebox largerpage"> 82 <div> 83 <div></div> 84 </div> 85 </div> 86 <div class="pagebox smallerpage"> 87 <div> 88 <div></div> 89 </div> 90 </div> 91 <div class="pagebox smallerpage"> 92 <div> 93 <div></div> 94 </div> 95 </div>