Translate property not working on div - html

Question

I've been trying to center both horizontally and vertically a specific div, and I got the vertical part to center, just not the horizontal part.
I'm using translate(-50%, -50%), which should be centering in a center, but is not working...
The part that says "Or login to your acccount" is the part I'm trying to vertically center.
Link to the site
Relevant CSS:
.logindiv {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 1

you need to do 2 things:
add a wrapper(this will be the green div), let's call login-wrap, and give it this properties:
.login-wrap {
float: left;
height: 100%;
position: relative;
width: 40%;
}
change relative to absolute here
.logindiv {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}

Answer 2

Try adding margins for horizontal center positioning
.logindiv {
margin-right: auto;
margin-left: auto;
}

Answer 3

transform is working. Try this one. You have to define your transform style for all the browsers.
.logindiv {
left: 50%;
transform: translate(-23%, -38%);
-ms-transform: translate(-23%, -38%); /* IE 9 */
-webkit-transform: translate(-23%, -38%) /* safari*/
width: 382px;
position: relative;
}

Answer 4

Here is your original code:
.logindiv {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
By changing the position to absolute, you can move the logindiv around with the transform: translate() (which does X first, then Y)
I chose 60%, -70% as that looked centered with the left on my screen, but mess around with it. This was the only way I could find to let it resize the same way as the welcome text on the left.
New code:
.logindiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(60%, -70%);
}