Center Element using css

I want to share an interesting way to center element of the whole window with css.

1. First, give the wrapper a padding property 50 viewport height:

   { padding: 50vh; }

and adjust the position of the content element:

{position: absolute; left: 50%; top: 50%;}

1. Then the content would start its position at the center of the window and grows to right side and down.

2. The final step is give content element a offset transform style:

   { transform: translate(-50%, -50%)}

You would get a perfect window centered element! Chekout the demo below and the browser support here.

Demo:

See the Pen ajKFm by Oliver - Frontend Developer (@Oliverl) on CodePen.