nil nil - 5 months ago 29
CSS Question

Translate property not working on div

I've been trying for about an hour or two to try to get this

div
centered both horizontally and vertically, and I got the vertical part to center, just not the horizontal part.

I'm using
translate(-50%, -50%)
, which should be centering it in the center..?

Here's the link

Here's the relevant css:

.logindiv {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


I forgot to mention that it was the part that says "Or login to your acccount" part was what I was trying to horizontally center.

Answer

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%);
}