“transform: translate(-50%, -50%)”导致文本模糊。

Question

我有一个 div 需要居中 - 但使用

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

将div中的所有内容模糊。我知道这个问题在这里已经被问了很多次，但是4或5篇帖子中的解决方案都没有对我起作用。是否有任何当前的解决方案，甚至是另一种正确居中div的方法？

- user7548189

---

为什么不使用 flex div，然后在内部使用 margin auto？ - kobbycoder

请列出您尝试过的选项，并创建一个代码片段。 - Zze

请提供您的HTML代码。正如您可能已经注意到的那样，根据内容的不同，有许多居中方式可供选择。因此，请帮助我们帮助您，并准确展示您想要的效果。 - wscourge

Answer 1

您可以在父级元素上使用 display: flex; align-items: center; justify-content: center; 来使子元素居中。

div {
 background: black;
 color: white;
 width: 100px;
 height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;
}

<div>
  <span>centered</span>
</div>

- Michael Coker

Answer 2

这是将元素居中的最佳方式之一，但需要添加position:absolute。

top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position:absolute;

然后会起作用

- Farzin Kanzi