Menu
Using CSS flexbox, how can I simultaneously vertically center the content of all divs in a row while keeping the same height on all of them without using the css height attribute?
HTML
<!DOCTYPE html> <html> <body> <div class="Grid"> <div class="Grid-cell"> 1<br> 1<br> 1<br> 1<br> </div> <div class="Grid-cell">2</div> <div class="Grid-cell"> 3<br> 3<br> </div> </div> </body> </html> CSS:
.Grid { display: flex; justify-content: center; align-items: center; } .Grid-cell { flex: 1; text-align: center; } (see http://jsbin.com/efaCEVa/1/edit)
619
align-items and justify-content are the important properties to absolutely center text horizontally and vertically. Horizontally centering is managed by the justify-content property and vertical centering by align-items.
In order to vertically and/or horizontally center text or other content contained in a flex item, make the item a (nested) flex container, and repeat the centering rules. More details here: How to vertically align text inside a flexbox? Alternatively, you can apply margin: auto to the content element of the flex item.
<div class='outer'> <div class='inner'>A</div> <div class='inner'>B</div> <div class='inner'>C</div> </div> .outer { align-items: stretch; display: flex; } .inner { align-items: center; display: flex; } 
.item-wrapper display: flex align-items: stretch justify-content: center .item width: 400px display: flex If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
