Question

美好的一天！我正在研究如何使文本垂直居中对齐。我想知道为什么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％）时，它确实会移动，但是只有一点。

Answer 1

使用平移时，移动是相对于框的大小的。

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

如果要使用translateY(50%)，则将其向下移动高度的50％，在这种情况下为25px。

对于您的特定示例，您有一个200px x 200px的容器。但是，这不是您要应用的元素。相反，您正在容器中移动.Content div。由于您尚未为该元素指定大小，因此它将为200px x段落高度。高度远小于宽度，因此这两种平移形式之间的移动距离也有所不同。

Answer 2

transform:translateY(50%)适用于要应用的元素的尺寸。如果元素的宽度大于高度，则与transform:translateX(50%)相比，元素的移动较少。

此外，由于您使用的设备的分辨率，如果元素具有相同的宽度和高度，您可能会注意到类似的情况（但程度不同），因为与之相比，它们通常在行上具有不同数量的像素列。我希望这会有所帮助。

问题与transform：translateX和translateY

2 个答案: