Vertical centering with flexbox
Apr 15 2015 ยท Web Design
I’ve only begun delving into doing layouts with flexbox (CSS Flexible Box Layout), but one immediate use case is vertical centering, which has been a pain point in web design since the transition away from table-based layouts.
HTML
<body>
<div class="flex-container">
<p class="centered-element-within-body">Center Me</p>
</div>
</body>
CSS
* { margin:0; padding:0; border:none; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
.flex-container { width:100%; /* width of body (fluid) */
height:100%; /* height of body (fluid) */
display:flex; /* flex display */
flex-direction: row; /* flow of elements in container */
justify-content: center; /* alignment along the main axis (x-axis, since the flex-direction = row) */
align-items: center; /* alignment along the secondary axis (y-axis) */
border: 5px solid #2C81F5;
}
.centered-element-within-body { background:#2C81F5; color:#fff; }
