31:[] 2f:{"title":"Flexbox for easy centering of div","cells":[{"id":0,"value":"# Flexbox for easy centering of div\n\n[Position absolute is THE WORST solution for centering a div](https://www.instagram.com/p/CmCDHFBj4w6/)\n\nThese three steps show how to center a `div` or any other element, in this case a `h2` using [flex](https://www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/):","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"----\n\n1. We start with a non-centered element:","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"\n\n

1

","pinned":true,"hidden":false,"mode":"html"},{"id":67,"value":"----\n\n2. We center horizontally using flex property `display: flex;` and `justify-content: center;` : ","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"\n\n

2

","pinned":true,"hidden":false,"mode":"html"},{"id":75,"value":"3. We can additainly center vertically using `align-items: center` : ","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"\n\n

3

","pinned":true,"hidden":false,"mode":"html"},{"id":22,"value":"-----------\n\nGeneric global styles (*not required for the centering*)","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"

\n\n","pinned":true,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}