transform: translate(-50%, -50%) 是一种常用的CSS技术，用于将一个元素在其容器中水平和垂直居中。它通常结合绝对定位和相对定位来实现这一效果。下面分别对这三个方面进行详解：

1. 代码的定义：

transform 是CSS属性，用于应用一些变换效果（如平移、缩放、旋转等）到元素上。translate() 是transform 属性的一个函数，用于平移元素。通过给 translate() 函数提供水平和垂直的偏移百分比，可以将元素相对于自身的尺寸进行平移，从而实现水平和垂直居中。

2. 举例说明：

假设我们有一个元素，希望将其在父容器中水平垂直居中，可以使用以下代码：

.centered {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

3. 例子解析：

假设我们有一个父容器（.container）和一个需要居中的子元素（.centered），下面是一个例子的解析：

HTML

<div class="container">

<div class="centered">Centered Content</div>

</div>

CSS

.container {

position: relative; /* 创建一个定位上下文 */

width: 300px;

height: 200px;

border: 1px solid #ccc;

}

.centered {

position: absolute; /* 相对于 .container 定位 */

top: 50%; /* 将元素的顶部定位到父容器的50%位置 */

left: 50%; /* 将元素的左侧定位到父容器的50%位置 */

transform: translate(-50%, -50%); /* 平移元素的50%自身尺寸，从而实现居中效果 */

background-color: lightblue;

padding: 10px;

}

在这个例子中，.container 是一个相对定位的容器，.centered 元素是一个绝对定位的子元素。通过将 .centered 元素的上边界和左边界都定位到 .container 的50%位置，再应用 transform: translate(-50%, -50%) 来平移元素的自身尺寸的50%，就可以实现水平垂直居中。这是因为 transform 的平移是基于元素自身的尺寸计算的。