Posts Tagged ‘flex-direction’

Vertical centering with flexbox

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.


div class="flex-container">    
p class="centered-element-within-body">Center Me</p>            


* { 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; }