Question

我试图找出如何仅使用CSS3在div框内动态居中文本，我找到了这个主题：https://stackoverflow.com/a/25799339/1445572

我使用了“方法1”，它解决了我的问题：

.container {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translateX(-50%) translateY(-50%);  
}

现在我试图理解为什么这段代码有效。我知道当您将position更改为absolute时，您会从正常流中删除该元素，然后您可以对其进行定位（使用top，left，... ）与其含有元素有关。

因此，代码：

.container {  
    position: absolute;  
    top: 50%;  
    left: 50%;   
}

将文本框的起始边缘放在div的中心位置。即使文本框位于中心，文本本身也不居中。所以我们需要以某种方式弥补。

问题：translateX(-50%)到底在做什么？更具体地说，50%是什么？

（在这种情况下，我无法使用百分比及其含义找到translateX的解释）

Answer 1

根据我的理解，translateX()与使用left（或right）更改元素的水平位置的方式相同。唯一的区别是当您使用left更改位置时，元素相应地移动和会影响附近的元素。但是如果你使用translateX，DOM就不会意识到转换并渲染所有附近的元素，就好像转换的div根本没有被移动一样。因此，如果您不希望相邻元素的位置受特定div使用translate的位置的更改影响。

50%指的是宽度的50％（使用translateX时）。

CSS位置：绝对 - 了解如何在div框中居中文本

1 个答案: