Absolute center a block with CSS



I often center login form in page horizontally and vertically.

#login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

  • The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed)
  • absolute: The element is positioned relative to its first positioned (not static) ancestor element
  • The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
  • translate(x,y): Defines a 2D translation.



No comments:

Post a Comment