Vertically and Horizontally Centering Div Content

[trent the thief]

You need to add these to the div style:

display:flex (flex isn't available in the editor, add it manually)
justify-content:center
align-items:center


Flare doesn't show flex as a block option and the justify-content and align-items come without their properties. Mine were "inherit." when I added them.

Note that Flare is going to gripe about using Flex on every build, but it is valid and it does render Divs correctly.

These divs are from the quick-links responsive div set. I applied the css to the complex selectors for quick-links, 1-5.

Without Flex:



With Flex:




There is a feature request to add Flex and the attendant options to the CSS validation.


So, the forum's IMG tag decided it didn't like my image links.

https://i.postimg.cc/BnJTm7XX/withFlex.png

https://i.postimg.cc/jSvzm67v/without-Flex.png

[NorthEast]

Yeah, flex is a really good and easy way to display content - Flare uses it in its skins.

This is a handy visual guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Usually you'd use set flex CSS properties in on both the container (display:flex), and also on the stuff inside the container (flex: x x x) to control how it's displayed.