时间戳

首页 > 解决方案 > 转换问题：translateX 和 translateY

html - 转换问题：translateX 和 translateY

问题描述

再会！我正在研究如何在中心垂直对齐文本。我想知道为什么 transform:translateY(50%) 移动了一点，而 transform:translateX(50%) 移动了很多。

我已经尝试使用精确的 px 值移动我的元素，我以某种方式了解它是如何工作的，但是使用像这样的百分比转换：translateY(-50%)，我很困惑。

<head>

  <style type="text/css">
    .Container {
      background-color: #85C1E9;
      height: 200px;
      width: 200px;
    }
    
    .Content {
      position: relative;
      transform: translateY(50%);
      transform: translateY(50%);
    }
  </style>


</head>

<body>

  <div class="Container">

    <div class="Content">

      <p>Hello</p>

    </div>

  </div>


</body>

我只想知道为什么如果我使用 translateX(50%)，元素会移动得更远，而当它是 translateY(50%) 时，它确实会移动，但只是一点点。

标签： htmlcss

解决方案

使用 translate 时，移动与框的大小有关。

假设您有一个 200 像素 x 50 像素的 div。如果使用translateX(50%)，则将元素向右移动其宽度的 50%（100 像素）。

translateY(50%)相比之下，如果您要使用它，您会将其向下移动其高度的 50%，在本例中为 25px。

对于您的具体示例，您有一个 200px x 200px 的容器。但是，这不是您要应用 translate 的元素。相反，您正在.Content容器内移动 div。由于您没有为该元素指定定义的大小，因此它将是 200px x 段落的高度。高度远小于宽度，因此两种平移形式之间的移动距离存在差异。

推荐阅读