css : center element vertically and horizontally
CSS transform allows us to modify the coordinate space of any element.
transform can have one of the following functions as its value :
- rotate
- skew
- scale
- matrix
- translate
- perspective
Using the translate
function we can solve the problem of centering any element in the middle of the page.
First, we need to center the element in the middle of the page using top
and left
. Then we need to consider offset the middling for its height and width using transform: translate(x, y)
.