Vertically center aligning div or text is one of the most common requirements for creating great UI/UX of websites. This can be achieved by css or jquery. In this post, we will see how to do it using CSS Flex property.
In the above code, we have 2 divs. ‘col-container’ is parent of ‘col-center’ and ‘col-center’ is parent div of text inside it.
So, what I have done here is, I made the ‘col-center’ center-aligned relative to it’s parent ‘col-container’. And, I also made the text center-aligned relative to ‘.col-center’.
To make the inner div center-aligned, we make the parent div display:flex;. Then, justify-content:center; will make the child div horizontally center-aligned and align-items:center; will make the div vertically center-aligned. That’s all, it’s as easy as that.
CSS Flex is a very powerful feature. There are lots of other stuff you can do with flex.
