Center aligned div
Learn to center align
<div> with fixed and variable width and height
With fixed width and height
Here, we have given
left to internal
<div> element and using the
calc() method, we need to place the element
50% from the top and left and subtract half width and height of an element from that.
One more point to note here is that we need to give
position: relative to the container element and
position: absolute to an internal one.
This technique will only work, if height and width of an element is known.
With variable width and height
There can be cases where the height and width of an element are not known. To handle such cases we can not rely on the above solution. Here, we need to use
transform property to display an element at the center of the screen.