There are times when you need to create some html elements and you want to position them at the center of the screen. For example fading messages, warnings, etc..
Here is the simple CSS rule to do just that:
And your css:
There are couple of things going on here. The fixed position allows us to separate from the parent of the div element and allows us to hover over the screen. By setting ‘top’ and ‘left’ rules to 50%, we position the top left corner of the div element at the center of the screen. Finally by using the half of the width of the div element we negative offset the left margin, we center the div’s center at the center of the screen.
You can center any html element using the above css.