flexbox-align-items-center-nested-001.html (964B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Test: Flexbox nested containers with align-items: center and flexible items</title> 4 <link rel="match" href="flexbox-align-items-center-nested-001-ref.html"> 5 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#align-items-property"> 7 <style> 8 html, body { margin: 0; padding: 0; } 9 body { 10 height: 400px; 11 position: relative; 12 } 13 14 .container-0 { 15 display: flex; 16 position: absolute; 17 height: 100%; 18 flex-direction: column; 19 } 20 21 .container-1 { 22 flex: 1 0 auto; 23 display: flex; 24 align-items: center; 25 } 26 27 .container-2 { 28 height: 100%; 29 display: flex; 30 align-items: center; 31 } 32 33 .content { 34 width: 200px; 35 height: 200px; 36 background: blue; 37 } 38 </style> 39 <body> 40 <div class="container-0"> 41 <div class="container-1"> 42 <div class="container-2"> 43 <div class="content"></div> 44 </div> 45 </div> 46 </div> 47 </body>