CSS box model is one of the most important concept in CSS, the backbone of each and every layout on web. Let’s solve a puzzle around it.

Heads-up: The perils of vertical alignment in CSS. It's a very easy yet tricky concept where most of the people get it wrong.

Question

Create a div element where text inside it is horizontally and vertically centre of box and it’s output is 200px square filled with with some color.

Look at codepen below for output and HTML code. Don’t look at CSS code at first write your own test it in multiple browsers, then look into solution.

What you need to do is write cross browser compatible CSS for it.

Suggestion: You can use flex and grid here but try to find solution without them. It will be a good learning for you.

See the Pen CSS Box Model by Harshit Purwar (@harshitpurwar) on CodePen.