I want to create a centered form.
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
This can easily be achieved with flexbox by simply removing all of the positioning from
#profileContainer and adding the following rules to
display: flex; justify-content: center; align-items: center; min-height: 100vh;
The first three rules will center
#profileContainer while the last one makes sure that the body will always be at least the full height of the view.
JSFiddle doesn't show the last rule correctly and your example is too big to embed it here, so I moved it over to codepen.
As a side note, you have an extra closing div tag just before you close main.