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

Understanding the CSS Transform Property: translate(-50%, -50%)

When working with hero images or full-screen elements, it's common to encounter CSS code that includes the following:

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

This CSS snippet raises the question: What does this code actually do?

The Role of translate(-50%, -50%)

The purpose of the transform: translate(-50%, -50%) property is to translate, or move, an element to a specific location. In this case, the element is translated in both the horizontal and vertical directions.

Horizontal Translation: translateX(-50%)

The first part of the translation, translateX(-50%), moves the element 50% of its width to the left. This is equivalent to moving the element's left edge to the center of its parent container.

Vertical Translation: translateY(-50%)

The second part of the translation, translateY(-50%), moves the element 50% of its height upward. This is equivalent to moving the element's top edge to the center of its parent container.

Centering the Element

Combined, the translate(-50%, -50%) effectively moves the center of the element to the center of its parent container. This is often used to create elements that are visually centered both horizontally and vertically.

Proof of Concept

To illustrate the concept, consider the following code snippet:

.parent {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.child {
  width: 50px;
  height: 50px;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

When you place the child element inside the parent, you can see that it is centered both horizontally and vertically. This is because the transform: translate(-50%, -50%) property has moved the center of the child element to the center of the parent container.

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