CSS `transform:translate(-50%, -50%)` 如何将元素居中？

了解 CSS 变换属性：translate(-50%, -50%)

使用英雄图像或全屏元素时，通常会遇到包含以下内容的 CSS 代码：

此 CSS 代码段引发问题：这段代码实际上做了什么？

translate(-50%, -50%)的作用

转换的目的：translate(-50 %, -50%) 属性是将元素平移或移动到特定位置。在这种情况下，元素会在水平和垂直方向上平移。

水平翻译：translateX(-50%)

翻译的第一部分， translateX(-50%)，将元素向左移动其宽度的 50%。这相当于将元素的左边缘移动到其父容器的中心。

垂直翻译：translateY(-50%)

翻译的第二部分、translateY(-50%)，将元素向上移动其高度的 50%。这相当于将元素的顶部边缘移动到其父容器的中心。

将元素居中

组合，翻译（-50%, -50% ) 有效地将元素的中心移动到其父容器的中心。这通常用于创建视觉上水平和垂直居中的元素。

概念证明

为了说明这个概念，请考虑以下代码片段：

当您将子元素放置在父元素内时，您可以看到它在水平和垂直方向上均居中。这是因为transform:translate(-50%, -50%)属性已经将子元素的中心移动到了父容器的中心。

以上是CSS `transform:translate(-50%, -50%)` 如何将元素居中？的详细内容。更多信息请关注PHP中文网其他相关文章！