Have you ever tried to center an element with FlexBox? You should have, because it makes for a very simple and easy to use solution.

In just a few short lessons, you'll be able to control the flow of your content. Justify Content and Align Items are two of the most basic tools in CSS.

Justify Content controls the movement of elements in the Main-Axis. You can use this tool to move an element from one point to another. If you have a lot of information that needs to be displayed side by side, Justify Content is for you.

Align Items controls the movement of elements in the Cross-Axis. You can use this tool to move an element from one point to another within its container (a div, span or p tag). If you have a lot of information that needs to be displayed in columns, Align Items is for you!

If you want to change the orientation of a FlexGrid, you can do so by changing the "flex-direction" property. So if you set "flex-direction: column", the grid will be oriented like a column grid. If you set it to "flex-direction: row", it will be oriented like a row grid.

So, now that we know how to center a "div", let's learn how to do this with a little more finesse. We'll begin by setting the display of the parent of the div to Flex. In our case, div with class name "heading" is the parent and the div with class name "inner-div" is the child. Then we set "justify-content" & "align-items" to center.

HTML: CSS: Result:

That is it. There are 'n' number of ways by which you can centre an element, today you got to know one of them and probably one of the easiest. Thanks everyone for your time. See you later.

Get the Code here: codepen.io/sreejit-sengupto/pen/yLjRMZZ