Html
copy
reset
Run
Netbax Online Editor Try it Yourself
<style> #demo{ width: 250px; height: 250px; display: flex; align-items: center; } #demo div, or p, or span{ flex:1; border: 1px solid #000; display: flex; align-items: center; justify-content: center; color:#fff; } </style> <p>align-items: center you change to: stretch | flex-start | flex-end | center | start | end | normal | baseline</p> <div id="demo"> <div style="background-color:#c00;min-height:50px;min-width:50px;">center</div> <div style="background-color:#008000;min-height:100px;min-width:100px;">center</div> <div style="background-color:#007FFF;min-height:150px;min-width:150px;">center</div> </div>
