Let's consider the following scenario where I need to position an element in the horizontal and vertical middle of a parent div.
To represent this situation we can use a simple blue square within a parent element with dashed line.
We need to end up with the following:
THE HTML
THE CSS
First, we will style the outer dashedBox div as follows:
Line 2: this is the important part of this code as it defines the type of display for the element
Line 3: this will now centre any content in this element
We shall now style the blueSquare:
Line 10: this will centre the blue square horizontally.
There are many other ways to centre content both horizontally and vertically but each usually comes with its own pros and cons.
It's up to you as the developer to select an option which will work for you and provide you with the best compatibility.
