How Does `transform: translate(-50%, -50%)` Center an Element?

Understanding the Role of "Transform: translate(-50%, -50%)"

When working with hero images or elements that span the entire screen, it's common to encounter CSS code like:

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

But what does this code actually accomplish?

The key to understanding this code is to recognize that it aligns the center of the element with the center of its parent. This is achieved by:

• translateX(-50%): Moves the element leftward by 50% of its width, effectively centering it along the x-axis.
• translateY(-50%): Moves the element upward by 50% of its height, centering it along the y-axis.

By moving the element back leftwards and upwards by half of its width and height, the center of the element is aligned with its parent's center, achieving both horizontal and vertical centering.

To illustrate this, consider the following code snippet:

body {
  margin: 0;
  padding: p;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}

When you hover over the parent element, the ghost element (.child::before) becomes visually centered by applying the transform: translate(-50%, -50%) property.

The above is the detailed content of How Does `transform: translate(-50%, -50%)` Center an Element?. For more information, please follow other related articles on the PHP Chinese website!